Multi-item Carousel For Bootstrap 5

Preview:

Description:

Just another JavaScript & CSS extension to create a responsive and multi-item carousel using Bootstrap 5’s carousel component.

See Also:

• Multi-slide Bootstrap 5 Carousel Component
• Extended Bootstrap 5 Carousel Component In Vanilla JS

How to use it:

1. To get started, make sure you have the latest Bootstrap 5 framework installed in the document.

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

2. The main HTML structure for the multi-item carousel.

<div class="container my-3 mt-5" id="featureContainer">
  <div class="row mx-auto my-auto justify-content-center">
    <div id="featureCarousel" class="carousel slide" data-bs-ride="carousel">
      <!-- Carousel Controls. OPTIONAL -->
      <div class="float-end pe-md-4">
        <a class="indicator" href="#featureCarousel" role="button" data-bs-slide="prev">
          Left Arrow Here
        </a> &nbsp;&nbsp;
        <a class="w-aut indicator" href="#featureCarousel" role="button" data-bs-slide="next">
          Right Arrow Here
        </a>
      </div>
      <!-- Add Slides To The 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="img1.jpg" class="img-fluid">
              </div>
              <div class="card-img-overlays">Slide 1</div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-3">
            <div class="card">
              <div class="card-img">
                <img src="img2.jpg" class="img-fluid">
              </div>
              <div class="card-img-overlays">Slide 2</div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-md-3">
            <div class="card">
              <div class="card-img">
                <img src="img3.jpg" class="img-fluid">
              </div>
              <div class="card-img-overlays">Slide 3</div>
            </div>
          </div>
        </div>
        ... more slides here
      </div>
    </div>
  </div>
</div>

3. Additional CSS styles.

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
@media (max-width: 767px) {
  #featureContainer .carousel-inner .carousel-item > div {
    display: none;
  }
  #featureContainer .carousel-inner .carousel-item > div:first-child {
    display: block;
  }
}
#featureContainer .carousel-inner .carousel-item.active,
#featureContainer .carousel-inner .carousel-item-next,
#featureContainer .carousel-inner .carousel-item-prev {
  display: flex;
}
@media (min-width: 768px) {
  
  #featureContainer .carousel-inner .carousel-item-end.active,
  #featureContainer .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }
  #featureContainer .carousel-inner .carousel-item-start.active, 
  #featureContainer .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }
  #featureContainer .card img{
    width: 90%;
    height: 40vh;
  }
  #featureContainer .carousel-item{
    justify-content: space-between;
  }
}
@media (max-width: 767px) {
  #featureContainer .card img{
    width: 100%;
    height: 75vh;
  }
}
#featureContainer .carousel-inner .carousel-item-end,
#featureContainer .carousel-inner .carousel-item-start { 
  transform: translateX(0);
}
#featureContainer .card{
  border: 0;
}
#featureContainer .card{
  position: relative;
}
#featureContainer .card .card-img-overlays{
  position: absolute;
  bottom: 15%;
  left: 10%;
}
#featureContainer a{
  text-decoration: none;
}
#featureContainer .indicator{
  border: 1px solid rgb(202, 202, 202);
  padding: 3px 6px 3px 6px;
}
#featureContainer .indicator:hover{
  background-color: blue;
  border: 1px solid blue;
  transition: 200ms;
}
#featureContainer .indicator:hover{
  color: white;
  transition: 200ms;
}
#featureContainer .indicator {
  color: lightgray;
}
#featureContainer .float-end{
  padding-top: 10px;
}

4. Enable the multi-slide carousel.

let myCarousel = document.querySelectorAll('#featureContainer .carousel .carousel-item');
myCarousel.forEach((el) => {
  const minPerSlide = 4
  let next = el.nextElementSibling
  for (var i=1; i<minPerSlide; i++) {
    if (!next) {
      // wrap carousel by using first child
      next = myCarousel[0]
    }
    let cloneChild = next.cloneNode(true)
    el.appendChild(cloneChild.children[0])
    next = next.nextElementSibling
  }
})