Multi-slide Bootstrap 5 Carousel Component

A JavaScript/CSS extension to Bootstrap 5 that allows multiple slides to be shown at a time.

How to use it:

1. Load the necessary JavaScript and CSS files in the document.

// Bootstrap 5 Framework
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

// Custom JavaScript & CSS
<link rel="stylesheet" href="style.css"/>
<script src="scripts.js"></script>

2. Code the HTML for the multi-slide Bootstrap 5 carousel component.

<div class="row mx-auto my-auto justify-content-center">
  <div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
              <div class="col-md-3">
                  <div class="card">
                      <div class="card-img">
                          <img src="https://via.placeholder.com/500x400/31f?text=1" class="img-fluid">
                      </div>
                      <div class="card-img-overlay">Slide 1</div>
                  </div>
              </div>
          </div>
          <div class="carousel-item">
              <div class="col-md-3">
                  <div class="card">
                      <div class="card-img">
                          <img src="https://via.placeholder.com/500x400/e66?text=2" class="img-fluid">
                      </div>
                      <div class="card-img-overlay">Slide 2</div>
                  </div>
              </div>
          </div>
          <div class="carousel-item">
              <div class="col-md-3">
                  <div class="card">
                      <div class="card-img">
                          <img src="https://via.placeholder.com/500x400/7d2?text=3" class="img-fluid">
                      </div>
                      <div class="card-img-overlay">Slide 3</div>
                  </div>
              </div>
          </div>
          <div class="carousel-item">
              <div class="col-md-3">
                  <div class="card">
                      <div class="card-img">
                          <img src="https://via.placeholder.com/500x400?text=4" class="img-fluid">
                      </div>
                      <div class="card-img-overlay">Slide 4</div>
                  </div>
              </div>
          </div>
          <div class="carousel-item">
              <div class="col-md-3">
                  <div class="card">
                      <div class="card-img">
                          <img src="https://via.placeholder.com/500x400/aba?text=5" class="img-fluid">
                      </div>
                      <div class="card-img-overlay">Slide 5</div>
                  </div>
              </div>
          </div>
          <div class="carousel-item">
              <div class="col-md-3">
                  <div class="card">
                      <div class="card-img">
                          <img src="https://via.placeholder.com/500x400/fc0?text=6" class="img-fluid">
                      </div>
                      <div class="card-img-overlay">Slide 6</div>
                  </div>
              </div>
          </div>
      </div>
      <a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </a>
      <a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </a>
  </div>
</div>

The post Multi-slide Bootstrap 5 Carousel Component appeared first on CSS Script.