0

I am building this card carousel in Bootstrap 4.3.1. On larger screens it should display more than 3 items in each run. Preferably it should display 5 or 6 cards. On smaller screens it should display single card per slide( that bit is working well).

The itemsPerSlide variable in the js should control the number of items per slides? I have adjusted the javascript for couple of hours now but with no result. I have also made some .css adjustments, but still with out my preferred outcome.

I'm not able to make it display more than 3 cards in each slide and I'm totally lost here. It would be great if someone could take a look at this. Here is a link to a fiddle

Here is a copy of the code I have at the moment:

$('.multi-item-carousel').on('slide.bs.carousel', function (e) {
  let $e = $(e.relatedTarget),
      itemsPerSlide = 5,
      totalItems = $('.carousel-item', this).length,
      $itemsContainer = $('.carousel-inner', this),
      it = itemsPerSlide - (totalItems - $e.index());

  if (it > 0) {
    for (var i = 0; i < it; i++) {
      $('.carousel-item', this).eq(e.direction == "left" ? i : 0).
        // append slides to the end/beginning
        appendTo($itemsContainer);

    }
  }

});
@media (min-width: 768px) {
  .multi-item-carousel .carousel-inner .carousel-item {
    margin-right: inherit;
  }
  .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item,
  .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item {
    display: block;
  }
  .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
  .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
    transition: none;
  }
  .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: -33.33333333333333%;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  .multi-item-carousel .carousel-inner .carousel-item-next,
  .multi-item-carousel .carousel-inner .carousel-item-prev {
    position: relative;
    transform: translate3d(0, 0, 0);
  }
  .multi-item-carousel .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  .multi-item-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item,
  .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
  .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  .multi-item-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
  .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item,
  .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
  .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    display: block;
    visibility: visible;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div id="theCarousel" class="carousel slide multi-item-carousel w-100" data-ride="carousel" data-interval = "20000">
  <div class="carousel-inner row w-100 mx-auto">
        <div class="carousel-item active col-md-2">



                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=1">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=2">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=3">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=4">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=5">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=6">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=5">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=6">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=5">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=6">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=5">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=6">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=5">
                </div>

        </div>
        <div class="carousel-item col-md-2">

                <div class="card card-body">
                    <img class="img-fluid" src="http://placehold.it/280x350?text=6">
                </div>

        </div>
    </div>
    <a class="carousel-control-prev w-auto" href="#theCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next w-auto" href="#theCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div> 
</div>
DaudiHell
  • 808
  • 10
  • 32
  • Did you get this code snippet from somewhere else? Take a look at the CSS and notice the `-33.33333333333333%;`. – Carol Skelly Jun 27 '19 at 11:24
  • @Zim I guess you are skelly in codeply? I do bookmarks for many of your codeplay. They are very helpful . Please post the solution I will remove my answer as I have got this solution from your codeplay – Sai Manoj Jun 27 '19 at 11:33
  • 1
    Thank @SaiManoj .. I waiting to see if @DaudiHall can explain the code, depth of CSS selectors, and recognizes that `-33.3%` is 1/3 (appropriate for `col-md-4`), whereas `col-md-2` would be `-16.6%`. The code from [my mulit-item carousel answer](https://stackoverflow.com/questions/20007610/bootstrap-carousel-multiple-frames-at-once/20008623#20008623) has been copied many times, but I want to make sure people understand it so that it is helpful to future readers and avoid filling SO with duplicate questions. – Carol Skelly Jun 27 '19 at 11:45
  • @Zim I accept that. Actually I have found this solution in codeply . So I have given codeply link. – Sai Manoj Jun 27 '19 at 11:53
  • 2
    thank you both @Zim and @SailManoj. I'm in a steep learning curve here, but of course I recognize that `-33.3%` is appropriate for `col-md-4` and `col-md-2` should be `-16.6%` according to that. I got this snipped from a answer here on Stack overflow [link](https://stackoverflow.com/questions/20007610/bootstrap-carousel-multiple-frames-at-once/20008623#20008623)[/link] now I see that is your answer @Zim. A great one. Now that I know that you are skelly, I want to thank you. Your snippets have helped me a lot and probably hundreds or thousands of other newbies. – DaudiHell Jun 27 '19 at 12:07
  • @Zim the reason for the `-33.33333333%` is that I converted the Less from this pen [link](https://codepen.io/anon/pen/gNGvXo)[/link] to .css via online Less -> Css converter. – DaudiHell Jun 27 '19 at 12:18

0 Answers0