Bootstrap 5 Carousel Multiple Items Increment By 1

20 Comments

  • Kelvin Chan says:

    How can I enable the buttons on mobile? It works prefectlly on desktop. But on mobile, the button do not work.

    • Coding Yaar says:

      It seems to be working fine for me. Which phone are you using?

    • Kelvin Chan says:

      Ohoh It seems that I forget to change the id name. I changed it, and it works now.

      But I have one more question. I am trying to show 2 card at one time so I set
      .carousel-item {
      flex: 0 0 50% !important;
      }
      But it have a bug that it cant show the last card by button on desktop. How can I fix it?

      Thank you very much for your design. It is really clear and helpful for me as a beginner of web development.

      • Coding Yaar says:

        Thanks for pointing it out. For now, you can tweak the working a bit to suit your requirement. In the 5th step, where we check if we reached the last card, replace the 4 with 3(number of cards visible + 1)

          if (scrollPosition < (carouselWidth - cardWidth * 3)) 

        PS Avoid using !important unless extremely necessary.

        • Kelvin Chan says:

          May I have I more question to ask about the function of this javascipt after reload?
          After reload, the javascipt do not work.
          I am trying to use window.onload = function() { // put your javascipt here} to fix this problem but it just do not work. May be it is because it define in the function scope. Do you have any suggestion about this?

      • Kelvin Chan says:

        I found out that sometime this variable is become 0 so the onclick function don’t work. I am not sure what is the reason
        var carouselWidth = $(“.carousel-inner”)[0].scrollWidth;

  • Mohamad Farid says:

    thank you for the tutorial, very awesome
    how to make the card display more than three or smaller?

  • Chris says:

    Any thoughts on doing this with Vanilla JavaScript? I’ve been trying to recreate this with React Bootstrap and Vanilla JS to no avail so far.

  • Joe Boxer says:

    I’m hoping to have multiple carousels on a page: id=carouselExampleControls1, id=carouselExampleControls2, etc.

    In your Javascript, you create a var “multipleCardCarousel” which looks like you are setting up the JS to work for multiple carousel instances.

    But in the rest of the code, you reference only “$(.carousel-inner)”. How would that need to be adjusted so the controls work with the correct instance.

    I’d rather not duplicate the JS multiple times.

    Thanks,
    Joe

    • Coding Yaar says:

      You would have to loop through the carousel ids in order to not repeat the code.

      1. get all the elements starting with your id carouselExampleControls like: $(‘*[id^=”carouselExampleControls”]’)
      2. loop through those elements using .each() method

      The var multipleCardCarousel, was for carousel with multiple cards and not multiple carousel instances.

  • tim says:

    Just wanted to say thanks 😊

  • Robert says:

    Hello, fantastic!
    May I kindly ask you how to increase the size of the slice of the next card that is out of the viewport when in desktop mode?
    I mean unvealing a larger slice of the next card to give the user a sharper hint that this is a slider 🙂 despite it is animated, you know .. nowadays people is too frenzied while browsing websites
    instead the slice creates curiosity , you see partially a portion of the next card out of vhe viewport and you are pushed to slide it in
    I would do the same in mobile too
    Thank you

    • Coding Yaar says:

      Hello!
      You can try reducing the carousel-item size. Something like:

      .carousel-item {
        flex: 0 0 30%;
      }
      

      For mobile, you might have to use the same code as we used for desktop. Try removing the media queries in CSS as well as JS.

  • Andrew says:

    Hey, I tried copying this code and it seems that the functionality of clicking through the slides isn’t working? The button for previous and next isn’t working? Do you might know what the cause of this may be?

    • Coding Yaar says:

      I’ve used Bootstrap 5 carousel for this one. You might be on an older version.

      • Allison says:

        Dumb question, but I am having the same issue as above and am not overly familiar with bootstrap. I am also having an issue where when on. small screen, it does not collapse into one, but stacks all of the items and the controls vanish.

Leave a Reply

Your email address will not be published. Required fields are marked *