Question

我试图在单个页面上放置2个bootstrap 4轮播，但是它没有按预期工作，因此我试图在页面上使用此this code，但这样做不能正确循环最后一个元素。它不会在最后一张幻灯片之后显示第一张幻灯片。要再显示3张幻灯片，还需要3个交易。

如果我移除了第一个轮播，那么效果很好。

我尝试在类声明之前添加div id，它确实删除了堆叠的图像，但对幻灯片没有帮助。

$('#multi-carousel').on('slide.bs.carousel', function(e) {
  var $e = $(e.relatedTarget);
  var idx = $e.index();
  var itemsPerSlide = 5;
  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');
      }
    }
  }
});

/*
    code by Iatek LLC 2018 - CC 2.0 License - Attribution required
    code customized by Azmind.com
*/

@media (min-width: 768px) and (max-width: 991px) {
  /* Show 4th slide on md if col-md-4*/
  #multi-carousel .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*/
  #multi-carousel .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) {
  #multi-carousel .carousel-item {
    margin-right: 0;
  }
  /* show 2 items */
  #multi-carousel .carousel-inner .active+.carousel-item {
    display: block;
  }
  #multi-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  #multi-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item {
    transition: none;
  }
  #multi-carousel .carousel-inner .carousel-item-next {
    position: relative;
    transform: translate3d(0, 0, 0);
  }
  /* left or forward direction */
  #multi-carousel .active.carousel-item-left+.carousel-item-next.carousel-item-left,
  #multi-carousel .carousel-item-next.carousel-item-left+.carousel-item,
  #multi-carousel .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 */
  #multi-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 */
  #multi-carousel .active.carousel-item-right+.carousel-item-prev.carousel-item-right,
  #multi-carousel .carousel-item-prev.carousel-item-right+.carousel-item,
  #multi-carousel .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 */
  #multi-carousel .carousel-inner .active+.carousel-item+.carousel-item {
    display: block;
  }
  #multi-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item {
    transition: none;
  }
  #multi-carousel .carousel-inner .carousel-item-next {
    position: relative;
    transform: translate3d(0, 0, 0);
  }
  /* left or forward direction */
  #multi-carousel .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 */
  #multi-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;
  }
}


/* LG */

@media (min-width: 991px) {
  /* show 4th item */
  #multi-carousel .carousel-inner .active+.carousel-item+.carousel-item+.carousel-item {
    display: block;
  }
  #multi-carousel .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 */
  #multi-carousel .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 */
  #multi-carousel .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 */
  #multi-carousel .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;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carouselExampleControls" class="carousel slide promoslider" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="assets/img/1.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="assets/img/2.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="assets/img/3.jpg" alt="Third slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="assets/img/4.jpg" alt="Fourth Slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="assets/img/5.jpg" alt="Fifth Slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="assets/img/6.jpg" alt="Sixth Slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span aria-hidden="true"><i class="fas fa-chevron-circle-left rem-25"></i></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span aria-hidden="true"><i class="fas fa-chevron-circle-right rem-25"></i></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<div class="top-content">
  <div class="container-fluid">
    <div id="multi-carousel" 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/backgrounds/1.jpg" 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/backgrounds/2.jpg" 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/backgrounds/3.jpg" 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/backgrounds/4.jpg" 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/backgrounds/5.jpg" 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/backgrounds/6.jpg" 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/backgrounds/7.jpg" 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/backgrounds/8.jpg" class="img-fluid mx-auto d-block" alt="img8">
        </div>
      </div>
      <a class="carousel-control-prev" href="#multi-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="#multi-carousel" 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>

仅就信息而言，我已经尝试了所有可以找到的多项目轮播，但似乎都没有。这是我最想要的结果。

我正在工作的结果

RESULT I AM WORKING FOR

我得到的结果：

RESULT I GET

Answer 1

您没有在此处将选择的项目适当地限制在特定的传送带上。

$('.carousel-item')选择文档中的 all 个项目，而不仅仅是属于特定轮播的项目。

为这些选择器添加特定轮播ID前缀，或将轮播元素本身用作context。

单页上的多个轮播无法启动bootstrap4

1 个答案: