PDA

View Full Version : Vertical Carousel with image slide-over



moodave
10-11-2017, 06:53 PM
I have created a vertical Bootstrap Carousel here:
http://www.daveparks.net/woodspoole/

The carousel is working nicely, but I would like to have the previous image stay in place and have the next image slide overtop of it, instead of the previous image being "pushed" up. Here is the CSS snippet I am using to achieve the vertical slides. Any ideas? Thanks!

.carousel-inner> .item.next, .carousel-inner > .item.active.right {
transform: translate3d(0, 100%, 0);
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
-o-transform: translate3d(0, 100%, 0);
top: 0;
}
.carousel-inner > .item.prev, .carousel-inner > .item.active.left {
transform: translate3d(0,-100%, 0);
-webkit-transform: translate3d(0,-100%, 0);
-moz-transform: translate3d(0,-100%, 0);
-ms-transform: translate3d(0,-100%, 0);
-o-transform: translate3d(0,-100%, 0);
top: 0;
}
.carousel-inner > .item.next.left, .carousel-inner > .item.prev.right, .carousel-inner > .item.active {
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
top:0;
}