Bootstrap Carousel 显示下一张和上一张图片
Posted
技术标签:
【中文标题】Bootstrap Carousel 显示下一张和上一张图片【英文标题】:Bootstrap Carousel showing next and previous image 【发布时间】:2013-12-19 06:08:48 【问题描述】:引导轮播是否可扩展以在滑块中显示下一个和上一个图像?
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/bike.png" >
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/bike2.png" >
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
我的轮播现在看起来像这样,如何将上一张和下一张图片添加到当前活动的幻灯片中?
【问题讨论】:
除非你完全只使用 Bootstrap,否则 Mike Alsup 的 Cycle 插件可能会更容易:jquery.malsup.com/cycle2/demo/carousel.php 【参考方案1】:Bootstrap 4 的解决方案
字幕在 768 像素或以上宽的屏幕上可见。
https://codepen.io/glebkema/pen/daLzpL
$('.carousel-item', '.multi-item-carousel').each(function()
var next = $(this).next();
if (! next.length)
next = $(this).siblings(':first');
next.children(':first-child').clone().appendTo($(this));
).each(function()
var prev = $(this).prev();
if (! prev.length)
prev = $(this).siblings(':last');
prev.children(':nth-last-child(2)').clone().prependTo($(this));
);
.multi-item-carousel
overflow: hidden;
.multi-item-carousel .carousel-indicators
margin-right: 25%;
margin-left: 25%;
.multi-item-carousel .carousel-control-prev,
.multi-item-carousel .carousel-control-next
background: rgba(255, 255, 255, 0.3);
width: 25%;
z-index: 11; /* .carousel-caption has z-index 10 */
.multi-item-carousel .carousel-inner
width: 150%;
left: -25%;
.multi-item-carousel .carousel-item-next:not(.carousel-item-left),
.multi-item-carousel .carousel-item-right.active
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
.multi-item-carousel .carousel-item-prev:not(.carousel-item-right),
.multi-item-carousel .carousel-item-left.active
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
.multi-item-carousel .item__third
float: left;
position: relative;
width: 33.33333333%;
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide multi-item-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="item__third">
<img src="https://via.placeholder.com/900x300/c69/f9c/?text=1" class="d-block w-100" >
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" class="d-block w-100" >
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://via.placeholder.com/900x300/69c/9cf/?text=3" class="d-block w-100" >
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
【讨论】:
@user667430 这个答案现在应该是公认的答案。谢谢 Gleb user6263942 它的代码库、方法和示例是最新的现代标准,并且在 BootStrap 4.x 中完全支持【参考方案2】:引导程序 5(2021 年更新)
Bootstrap 5 不再需要 jQuery,因此可以使用 vanilla JS 完成幻灯片的克隆(需要部分显示上一张和下一张幻灯片)。
slides.forEach((el) =>
// number of slides per carousel-item
const minPerSlide = slides.length
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++)
if (!next)
// wrap carousel by using first child
next = slides[0]
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
)
Bootstrap 5 partial reveal carousel demo
引导程序 4(2019 年更新)
另一种变化是只显示下一张和上一张幻灯片的一部分。这可以通过在carousel-inner
..的左侧和右侧放置一个绝对位置覆盖来完成。
.carousel-inner:before
position:absolute;
top:0;
bottom: 0;
right: 82%;
left: 0;
content:"";
display:block;
background-color: #fff;
z-index: 2;
.carousel-inner:after
position:absolute;
top:0;
bottom:0;
right: 0;
left: 82%;
content:"";
display:block;
background-color:#fff;
z-index: 2;
Bootstrap 4 partial carouselBootstrap 4 partial carousel (alternate)
Bootstrap 3(原始答案)
Bootstrap 可以,但需要一些自定义...
在 Bootply 上查看此示例:http://bootply.com/94444
您必须使用 CSS 和 jQuery 自定义幻灯片的位置..
.carousel-inner .active.left left: -33%;
.carousel-inner .next left: 33%;
.carousel-inner .prev left: -33%;
【讨论】:
【参考方案3】:不幸的是,我体验到 Bootstrap 3.3.5 不支持给定的解决方案,因此我制作了一个全新的 Bootstrap 3 轮播扩展来达到目标。可以在https://github.com/assarte/visor-carousel找到它
希望这会有所帮助。
【讨论】:
以上是关于Bootstrap Carousel 显示下一张和上一张图片的主要内容,如果未能解决你的问题,请参考以下文章
Bootstrap Carousel 没有作为 Rails 应用程序的一部分移动
如何使用 UIScrollView 和 UIPageControl 实现图像视图库并预览下一张和上一张图像?
Java程序设计:界面有两个按钮(上一张和下一张),当单击上一张显示上一张图片,单击下一张显示下一张图片