引导轮播显示下一张幻灯片的一部分 [英] Bootstrap carousel reveal part of next slide
问题描述
我有一个自举轮播,目前正在垂直滚动。有没有一种方法可以显示下一张幻灯片的一部分(例如33%),该部分位于底部,位于当前幻灯片的上方,并且在滑动时最好向上滑动。我已经用我目前拥有的东西设置了小提琴。
I have a bootstrap carousel that is currently scrolling vertically. Is there a way to show a part of the next slide (say 33%) that will sit at the bottom and would sit above the current slide and ideally slide up when sliding. I've set up a fiddle with what I currently have.
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';
}
推荐答案
改写。从根本上讲,该插件可以隐藏所有幻灯片:
It's not possible without a serious rewrite. Fundamentally, this plugin works by hiding all of the slides:
.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;
}
但是,即使我们禁用该规则,动画仍然会损坏。该代码一次显示并重新放置一张幻灯片。
However, even if we disable that rule, the animation is still broken. The code displays and repositions one slide at a time.
我的建议是寻找另一个更符合您需求的插件。
My recommendation is to look for another plugin that more closely matches your needs.
这篇关于引导轮播显示下一张幻灯片的一部分的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!