我目前正在一个网站上工作，我正在尝试基于 bootstrap 4 实现一个轮播。我当前的实现由以下代码描述：
<div class="top-content">
<div class="container-fluid">
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active">
<img src="assets/img/logo_giocatore.png" class="img-fluid mx-auto d-block" alt="img1">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="assets/img/logo_giocatore.png" class="img-fluid mx-auto d-block" alt="img2">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="assets/img/logo_giocatore1.png" class="img-fluid mx-auto d-block" alt="img3">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="assets/img/logo_giocatore1.png" class="img-fluid mx-auto d-block" alt="img4">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="assets/img/logo_giocatore1.png" class="img-fluid mx-auto d-block" alt="img5">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="assets/img/logo_giocatore1.png" class="img-fluid mx-auto d-block" alt="img6">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="assets/img/logo_giocatore1.png" class="img-fluid mx-auto d-block" alt="img7">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="assets/img/logo_giocatore1.png" class="img-fluid mx-auto d-block" alt="img8">
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example" 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="#carousel-example" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
CSS部分是这样的：
@media (min-width: 768px) and (max-width: 991px) {
/* Show 4th slide on md if col-md-4*/
.carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%; /*change this with javascript in the future*/
z-index: -1;
display: block;
visibility: visible;
}
}
@media (min-width: 576px) and (max-width: 768px) {
/* Show 3rd slide on sm if col-sm-6*/
.carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -50%; /*change this with javascript in the future*/
z-index: -1;
display: block;
visibility: visible;
}
}
@media (min-width: 576px) {
.carousel-item {
margin-right: 0;
}
/* show 2 items */
.carousel-inner .active + .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 {
transition: none;
}
.carousel-inner .carousel-item-next {
position: relative;
transform: translate3d(0, 0, 0);
}
/* 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 {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be also positioned 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 {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
/* MD */
@media (min-width: 768px) {
/* show 3rd of 3 item slide */
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next {
position: relative;
transform: translate3d(0, 0, 0);
}
/* left or forward direction */
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* right or prev direction */
.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;
}
}
/* LG */
@media (min-width: 991px) {
/* show 4th item */
.carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
transition: none;
}
/* Show 5th slide on lg if col-lg-3 */
.carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -25%; /*change this with javascript in the future*/
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* right or prev direction //t - previous slide direction last item animation fix */
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
我使用的javascript函数是：
debugger;
$(document).ready(function () {
$('#carousel-example').on('slide.bs.carousel', function (e) {
/*
CC 2.0 License Iatek LLC 2018 – Attribution required
*/
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 4;
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");
}
}
}
});
});
carousell 工作得很好，但是，当我按箭头查看另一张图像时，它会执行转换，然后它会延迟加载图像，比如一秒钟。有没有办法解决这个问题？非常感谢！！