我有一个当前正在垂直滚动的bootstrap轮播。有没有办法显示下一张幻灯片的一部分(比如33%),它将位于底部并位于当前幻灯片上方,理想情况下滑动时会向上滑动。我已根据目前的情况设置fiddle。
HTML:
<div class="container">
<div class="page-header">
<h1>Bootstrap Vertical Carousel</h1>
<p class="lead">Out of the box, Bootstrap only comes with a traditional horizontal carousel. This Pen has the HTML and CSS to get it to animate vertically with up/down carousel controls.</p>
</div>
</div>
<div class="bg-info">
<div class="container">
<div id="carousel-example-vertical" class="carousel vertical slide">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/350x150/123456">
</div>
<div class="item">
<p class="ticker-headline">
<img src="http://placehold.it/350x150/236152">
</p>
</div>
<div class="item">
<img src="http://placehold.it/350x150/096437">
</div>
<div class="item">
<img src="http://placehold.it/350x150/000000">
</div>
</div>
<!-- Controls -->
<a class="up carousel-control" href="#carousel-example-vertical" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="down carousel-control" href="#carousel-example-vertical" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
的CSS:
body {
margin: 50px 0;
}
.ticker-headline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 15px 0;
margin: 0;
font-size: 18px;
}
.carousel.vertical .carousel-inner {
height: 100%;
width: auto;
}
.carousel.vertical .carousel-inner > .item {
width: auto;
padding-right: 50px;
-webkit-transition: 0.6s ease-in-out top;
transition: 0.6s ease-in-out top;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel.vertical .carousel-inner > .item {
-webkit-transition: 0.6s ease-in-out;
transition: 0.6s ease-in-out;
}
.carousel.vertical .carousel-inner > .item.next, .carousel.vertical .carousel-inner > .item.active.right {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
top: 0;
}
.carousel.vertical .carousel-inner > .item.prev, .carousel.vertical .carousel-inner > .item.active.left {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
top: 0;
}
.carousel.vertical .carousel-inner > .item.next.left, .carousel.vertical .carousel-inner > .item.prev.right, .carousel.vertical .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
top: 0;
}
}
.carousel.vertical .carousel-inner > .active,
.carousel.vertical .carousel-inner > .next,
.carousel.vertical .carousel-inner > .prev {
display: block;
}
.carousel.vertical .carousel-inner > .active {
top: 0;
}
.carousel.vertical .carousel-inner > .next,
.carousel.vertical .carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel.vertical .carousel-inner > .next {
top: 100%;
}
.carousel.vertical .carousel-inner > .prev {
top: -100%;
}
.carousel.vertical .carousel-inner > .next.left,
.carousel.vertical .carousel-inner > .prev.right {
top: 0;
}
.carousel.vertical .carousel-inner > .active.left {
top: -100%;
}
.carousel.vertical .carousel-inner > .active.right {
top: 100%;
}
.carousel.vertical .carousel-control {
left: auto;
width: 50px;
}
.carousel.vertical .carousel-control.up {
top: 0;
right: 0;
bottom: 50%;
}
.carousel.vertical .carousel-control.down {
top: 50%;
right: 0;
bottom: 0;
}
.carousel.vertical .carousel-control .icon-prev,
.carousel.vertical .carousel-control .icon-next,
.carousel.vertical .carousel-control .glyphicon-chevron-up,
.carousel.vertical .carousel-control .glyphicon-chevron-down {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.carousel.vertical .carousel-control .icon-prev,
.carousel.vertical .carousel-control .glyphicon-chevron-up {
left: 50%;
margin-left: -10px;
top: 50%;
margin-top: -10px;
}
.carousel.vertical .carousel-control .icon-next,
.carousel.vertical .carousel-control .glyphicon-chevron-down {
left: 50%;
margin-left: -10px;
top: 50%;
margin-top: -10px;
}
.carousel.vertical .carousel-control .icon-up,
.carousel.vertical .carousel-control .icon-down {
width: 20px;
height: 20px;
line-height: 1;
font-family: serif;
}
.carousel.vertical .carousel-control .icon-prev:before {
content: '\2039';
}
.carousel.vertical .carousel-control .icon-next:before {
content: '\203a';
}
答案 0 :(得分:0)
如果没有严肃的重写,这是不可能的。从根本上说,这个插件的工作原理是隐藏所有幻灯片:
.carousel-inner>.item {
position: relative;
display: none; <- culprit
-webkit-transition: .6s ease-in-out left;
-o-transition: .6s ease-in-out left;
transition: .6s ease-in-out left;
}
但是,即使我们禁用该规则,动画仍然会被破坏。代码一次显示并重新定位一张幻灯片。
我的建议是寻找更符合您需求的另一个插件。