Несколько Карусель на одной странице не работает bootstrap4 - PullRequest
Новая
       17

Несколько Карусель на одной странице не работает bootstrap4

1 голос
/ 10 мая 2019

Я пытаюсь поместить 2 начальной загрузки 4 карусели на одну страницу, но это не работает, как предполагалось. Я пытаюсь использовать этот этот код на своей странице, и что не делает цикл последнего элемента правильно. Он не отображает первый слайд после последнего слайда. Для появления первого слайда требуется еще 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

1 Ответ

0 голосов
/ 13 мая 2019

Вы не ограничиваете выбор предметов определенной каруселью здесь.

$('.carousel-item') выбирает все элементов в документе, а не только элемент, принадлежащий определенной карусели.

Либо добавьте префикс этих селекторов к определенному идентификатору карусели, либо используйтесам элемент карусели как context .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...