无法使用引导程序4和jquery在多项目轮播中显示3张幻灯片

Question

here i am trying to display the 3 items in multi card carousel like [1,2,3] [4,5,6] like that when ever user pushes next on the [1,2,3] then [4,5,6] has to be display now whats happening is instead of this behavior when i press next [1,2,3] then [2,3,4] is displaying and the next and previous buttons are also not displaying

below is my code

.css code

 .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;
    }

.html code

 <div class="container-fluid">
  <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
      <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="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
          </div>
          <div class="carousel-item col-md-4">
              <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
          </div>
          <div class="carousel-item col-md-4">
              <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
          </div>
          <div class="carousel-item col-md-4">
              <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
          </div>
          <div class="carousel-item col-md-4">
              <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
          </div>
          <div class="carousel-item col-md-4">
              <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
          </div>
          <div class="carousel-item col-md-4">
              <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
          </div>
          <div class="carousel-item col-md-4">
              <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
          </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>
  </div>
</div>

jquery code

$('#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');
          }
      }
  }

});

here main issues i am facing unable to move all slide at once like [1,2,3] [4,5,6] infinite loop and previous and next button not visible

Answer 1

I used the code below, adapted from an answer from this site, to show two items at once in a carousel. It clones the next slide and appends it to the active element.

Then I jump to every 2nd item after the user clicks the next and prev buttons to avoid just the problem you mentioned.

Works for manual sliding only. You probably already found a solution but if anyone stumbles upon this question, here's a possible solution:

  $('.item').each(function() { var next = $(this).next(); console.log(next); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().addClass('next').appendTo($(this)); }); $('.carousel-control.left').click(function() { i -= 2; if(i < 0) { i = 6; } $('#myCarousel').carousel(i); }); $('.carousel-control.right').click(function() { i += 2; if(i > 6) { i = 0; } $('#myCarousel').carousel(i); }); 

I added the .next class just for CSS modifications to put the appended item in the position I wanted.

 .livro.next { position: absolute; top: -80%; float: right; transform: translate3d(125%, 80%, 0); }