Bootstrap的Carousel实现垂直滚动效果

作者 happyWang 日期 2014-11-21 浏览量
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