我发现了同样的问题,但我没能成功。 (Bootstrap carousel with multiple items and default carousel on the same page)
我想组合默认轮播(例如每张幻灯片一张图片) 这一个:https://www.codeply.com/go/s3I9ivCBYH
这是我的代码:https://www.codeply.com/go/6AXxUSWcmV
我试图更改css,也尝试更改类的名称,与bootstrap类的名称不同,添加一些ID,但没有成功......
我正在使用bootstrap4
答案 0 :(得分:1)
为了让两种类型的轮播在同一页面上运行,您只需要为修改过的轮播附带的所有其他样式添加前缀,以防止样式发生碰撞。在下面的示例中,我只使用“小”轮播的id为样式添加前缀。
$('#small-carousel').on('slide.bs.carousel', function (e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 3;
var totalItems = $('.carousel-item').length;
if (idx >= totalItems-(itemsPerSlide-1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i=0; i<it; i++) {
// append slides to end
if (e.direction=="left") {
$('.carousel-item').eq(i).appendTo('.carousel-inner');
}
else {
$('.carousel-item').eq(0).appendTo('.carousel-inner');
}
}
}
});
&#13;
/* Note the `#small-carousel` prefixes */
/*@media (min-width: 768px) {*/
/* show 3 items */
#small-carousel .carousel-inner .active,
#small-carousel .carousel-inner .active + .carousel-item,
#small-carousel .carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
#small-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
#small-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
#small-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
#small-carousel .carousel-inner .carousel-item-next,
#small-carousel .carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
#small-carousel .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
#small-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
#small-carousel .carousel-item-next.carousel-item-left + .carousel-item,
#small-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
#small-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
#small-carousel .carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
#small-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
#small-carousel .carousel-item-prev.carousel-item-right + .carousel-item,
#small-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
#small-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
/*}*/
&#13;
<!-- “Big” carousel -->
<div id="big-carousel" class="carousel slide mb-3" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/800x150/f5d0c5/fff&text=Big+1" alt="Big 1">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/800x150/d69f7e/fff&text=Big+2" alt="Big 2">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/800x150/774936/fff&text=Big+3" alt="Big 3">
</div>
</div>
<a class="carousel-control-prev" href="#big-carousel" 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="#big-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- “Small” carousel with id="small-carousel" -->
<div class="container-fluid">
<div id="small-carousel" class="carousel slide" data-ride="carousel" data-interval="2000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-4 active">
<img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/729ea1/fff&text=Small+1" alt="Slide 1">
</div>
<div class="carousel-item col-4">
<img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/b5bd89/fff&text=Small+2" alt="Slide 2">
</div>
<div class="carousel-item col-4">
<img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/dfbe99/fff&text=Small+3" alt="Slide 3">
</div>
<div class="carousel-item col-4">
<img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/ec9192/fff&text=Small+4" alt="Slide 4">
</div>
<div class="carousel-item col-4">
<img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/db5375/fff&text=Small+5" alt="Slide 5">
</div>
<div class="carousel-item col-4">
<img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/596f62/fff&text=Small+6" alt="Slide 6">
</div>
<div class="carousel-item col-4">
<img class="img-fluid mx-auto d-block" src="http://placehold.it/400x200/c3d898/fff&text=Small+7" alt="Slide 7">
</div>
</div>
<a class="carousel-control-prev" href="#small-carousel" role="button" data-slide="prev">
<i class="fa fa-chevron-left fa-lg text-muted"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#small-carousel" role="button" data-slide="next">
<i class="fa fa-chevron-right fa-lg text-muted"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
&#13;