html - 单页上的多个轮播不工作 bootstrap4

标签 html css twitter-bootstrap bootstrap-4

我正在尝试将 2 个 bootstrap 4 carousels 放在一个页面上，但它没有按预期工作我正在尝试使用这个 this code在我的页面上，没有正确循环最后一个元素。它不显示最后一张幻灯片之后的第一张幻灯片。第一张幻灯片出现还需要 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

最佳答案

您没有正确地将元素选择限制在此处的特定轮播中。

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

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

关于html - 单页上的多个轮播不工作 bootstrap4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56079073/

上一篇：javascript - 无法读取 null 的属性 'innerHTML'

下一篇：javascript - w3schools 模态动画关闭

相关文章：

php - 确认/重定向功能不起作用 - javascript

javascript - 粘性页脚 CSS 不工作

javascript - 如何在单击元素时更改图片。它必须只显示一种尺寸的图片，不能显示其他尺寸的图片。

html - 获取前一个元素的高度

javascript - 如何使用 JavaScript 删除最后一个 div

c# - 我可以在 GridView 中合并页脚吗？

css - Flex Box Grid 容器/Ionic 全屏 View Css

css - Bootstrap2 Navbar 和下方行之间的神秘空白

javascript - 当另一个元素打开时关闭 Accordion 元素

html - 如何使容器内的元素响应？

©2024 IT工具网  联系我们