Trying to create a carousel oriented vertically in Bootstrap 4 Alpha 6 has been a bit of a challenge. It's puzzling why the Bootstrap developers didn't include this orientation, but I've been working on my own solution. I suspect there's something missing in my CSS that's causing the issue.
You can view my demo on JSFIDDLE
The problem lies in the lack of smooth upward movement in the carousel slides. They appear from the bottom but don't continue upwards when reaching the end - they simply disappear.
I've been trying to adapt old methods used for BS3 and align them with the new CSS classes as best as possible. Here's my code, any help in solving this mystery would be greatly appreciated.
HTML
<!-- Bootstrap Carousel -->
<div id="testCarousel" class="carousel slide vertical" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testCarousel" data-slide-to="0" class="active"></li>
<li data-target="#testCarousel" data-slide-to="1"></li>
<li data-target="#testCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="//placehold.it/2500x750" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="//placehold.it/2500x750" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="//placehold.it/2500x750" alt="Third slide">
</div>
</div>
</div>
CSS
/* Just for Example Purposes */
body {
background: #333
}
/* Vertical Carousel */
.vertical .carousel-inner {
height: 100%;
}
.carousel.vertical .carousel-item {
-webkit-transition: 0.6s ease-in-out top;
-moz-transition: 0.6s ease-in-out top;
-ms-transition: 0.6s ease-in-out top;
-o-transition: 0.6s ease-in-out top;
transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
top: 0;
}
.carousel.vertical .carousel-item-next {
top: 100%;
}
.carousel.vertical .carousel-item-prev {
top: -100%;
}
.carousel.vertical .carousel-item-next.carousel-item-left,
.carousel.vertical .carousel-item-prev.carousel-item-right {
top: 0;
}
.carousel.vertical .active.carousel-item-left {
top: -100%;
}
.carousel.vertical .active.carousel-item-right {
top: 100%;
}
.carousel.vertical .carousel-item {
left: 0;
}
Instead of the carousel slides disappearing and reappearing, I'm aiming for a smooth natural upward flow as if the hidden images weren't aligned to the left by default in Bootstrap.
Thank you in advance!!!