Bootstrap 4旋转木马显示3项,但实际页面只显示1图像
问题描述:
我做了test page(现在直播)与旋转木马,应该显示3张图片和提前。我试图按照这个https://www.codeply.com/go/s3I9ivCBYH/bootstrap-4-responsive-carousel-one-at-a-time的代码在我的页面上,它一次只显示一个图像。我从代码中复制了代码并修改了我的图像的src。我添加了CSS到我的链接的custombs4.css页面,并在页面底部添加了javascript。Bootstrap 4旋转木马显示3项,但实际页面只显示1图像
你能帮忙解决这个问题吗?在此先感谢
<--- at the bottom of the page before closing body tag --->
$('#carouselExample').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');
}
}
}
});
<--- css linked on :http://www.pscompetitiveedge.com/css/custombs4.css --->
media (min-width: 768px) {
/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.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 */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.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 */
.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 */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.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;
}
}
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="3000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active">
<img class="img-fluid mx-auto d-block" src="slide/1.jpg" alt="teamwork">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/2.jpg" alt="fire eating">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/3.jpg" alt="fire walk">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/4.jpg" alt="trust fall">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/5.jpg" alt="trust fall 2">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/6.jpg" alt="crew">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/7.jpg" alt="fire eating 2">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="slide/8.jpg" alt="fire eating 3">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" role="button" data-slide="next">
<i class="fa fa-chevron-right fa-lg text-muted"></i>
<span class="sr-only">Next</span>
</a>
谢谢,我知道我错过了一些东西简单。我将fa图标更改为我该如何编码才能使图标始终显示? 我怎样才能使 – mlegg
@ mlegg,你可以把那个你的活页面,我会看看 –
http://www.pscompetitiveedge.com/leadership.html – mlegg