引導轉盤是否可以擴展以顯示滑塊中的下一張和上一張圖像？
<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" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/bike2.png" alt="...">
<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>我的旋轉木馬現在看起來是這樣的，我如何在當前活動的幻燈片中添加上一張和下一張圖像？
引導程序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" alt="">
<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" alt="">
<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" alt="">
<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" >
<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>引導數據庫5.3(2023年更新)
對于JS和CSS揭示& quot在Bootstrap 5.3中可以用同樣的方法實現carousel:
https://codeply.com/p/f6zckgIuE6
引導程序5.0(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部分展示轉盤演示
引導數據庫4(2019年更新)
另一種變化是只顯示下一張和上一張幻燈片的一部分。這可以通過在內部轉盤的左側和右側放置一個絕對位置覆蓋圖來實現..
.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;
}引導4部分傳送帶 引導4部分傳送帶(備用)
自舉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%; }我發現Bootstrap 3.3.5不支持給定的解決方案。不幸的是，我做了一個全新的Bootstrap 3 carousel擴展來實現這個目標。它可以在https://github.com/assarte/visor-carousel找到
希望這能有所幫助。
你可以去bootstrap docs，復制可用的基本代碼，然后根據你的個人喜好進行調整。
上一篇python 表格不覆蓋
下一篇vue const 動態