Bootstrap的Carousel实现垂直滚动效果

Bootstrap的Carousel默认是水平滚动的，下面介绍实现其垂直滚动的方式，看代码：

html结构，相对于bootstrap，新增了vertical的class

        ![](http://placehold.it/600x400&text=First+Slide)
    

    

        ![](http://placehold.it/600x400&text=Second+Slide)
    

    

        ![](http://placehold.it/600x400&text=Third+Slide)
    




[‹](#myCarousel)
[›](#myCarousel)

css样式，设定.carousel.vertical 对应的一些控制class的效果和动画

.vertical .carousel-inner {
height: 100%;
}

.carousel.vertical .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 .next {
top: 100%;
}

.carousel.vertical .prev {
top: -100%;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
top: 0;
}

.carousel.vertical .active.left {
top: -100%;
}

.carousel.vertical .active.right {
top: 100%;
}

.carousel.vertical .item {
left: 0;
}​

js代码，设定滚动的间隔

$(‘.carousel’).carousel({
interval: 3000
})

以上就可以顺利实现一个垂直滚动的Carousel

参考网址：

twitter-bootstrap-carousel-vertical-sliding

Carousel vertical Bootstrap slider

---

• ← Previous Post
• Next Post →

---

---

相关推荐

---