Bootstrap 5+ carousel with cards based on viewport (screen size)

user_6583298 0
Viewed 1384

I have been searching quite some time for this but unfortunately all questions/answers are mostly 6/8 years old. Now that Bootstrap has evolved so much, I want to ask the question as maybe someone knows how to do this.

My requirement is to have a carousel of cards that adapts based on viewport, for example:

  • Default size: 3 items
  • Mobile size: just 1 item

This snippet is perfect for my needs: https://gosnippets.com/snippets/bootstrap-carousel-with-cards-in-3-columns, however I was unable to achieve what I want.

I have also played around with Slick carousel, but frankly I'm not a fan. It does exactly what I need but it's outdated, bugged and I would be much happier to use just bootstrap.

My project uses Webpack so I am able to use SCSS if that helps.

Please let me know if it's possible to achieve what I want with just plain Bootstrap 5.

bootstrap-5 twitter-bootstrap css html
1 Answers

You can do that in plain bootstrap by calling two carousel. Here is the following code and hopefully you will understand the code pattern.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner d-none d-sm-block"> //d-none: display none for all devices, d-sm-block: hide on screens smaller than sm (width < 768px)
        //loops start
        <div class="carousel-item active">
            <div class="container">
                <div class="row">
                  <div class="col-sm">
                    <img src="..." class="d-block w-100" alt="...">
                  </div>
                  <div class="col-sm">
                    <img src="..." class="d-block w-100" alt="...">
                  </div>
                  <div class="col-sm">
                    <img src="..." class="d-block w-100" alt="...">
                  </div>
                </div>
              </div>
        </div>
        //loops end
      </div>
    <div class="carousel-inner d-sm-none">//d-sm-none: hide on sm (width < 768px) and wider screens
      <div class="carousel-item active">
          <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

Wish you good luck.

user_119988010
Related