Bootstrap 5 Carousel Multiple Items Increment By 1

Recently added:

39 Comments

  • Gan says:

    Can ask how to show 2 items per slide?

  • Reyan says:

    let carouselHeight = carouselInner.scrollHeight;
    let cardHeight = carouselItem.clientHeight;
    let scrollPosition = 0;
    carouseControlNext.addEventListener(‘click’, () => {
    // debugger;
    if (scrollPosition < (carouselHeight – cardHeight * 4)) {
    scrollPosition += cardHeight;
    carouselInner.scrollTo({
    top: scrollPosition,
    left: 0,
    behavior: 'smooth',
    });
    }

    I have added this code for vertical carousel and I'm showing 3 items at a time, on first click of next it scroll to top but after that it is not scrolling to the top however, scrollPosition value is getting updated but not scrolling to top, I will be glad for your help, please have a look.

    • Coding Yaar says:

      Try using the scrollTop function instead of scrollTo. Something like:

      carouselInner.scrollTop( scrollPosition)

      • Reyan says:

        Thanks but it is also not working, I have tried and I’m using vanilla javascript not jQuery I have modified your code into javascript.

        • Coding Yaar says:

          I’m not sure how you are doing it. This is something I came up with for the next button using jQuery, see if it helps:

          var cardHeight = $(".carousel-item").height();
          var carouselHeight =   $(".carousel-inner")[0].scrollHeight;
           $("#carouselExampleControls .carousel-inner").height(cardHeight * 2);
          var scrollPosition = 0;
          $("#carouselExampleControls .carousel-control-next").on('click', () => {
          if (scrollPosition < (carouselHeight - cardHeight * 2)) {
          scrollPosition += cardHeight;
          $("#carouselExampleControls .carousel-inner").scrollTop( scrollPosition);

  • Reyan says:

    Thanks for all your help. How we can implement this carousel as vertical carousel?

Leave a Reply

Your email address will not be published.