Carousel Bootstrap 5: JQuery to Javascript

I need a bootstrap 5 carousel, showing multiple items and slide one at time. All I need is to translate the Jquery code to pure Javascript. Then I could remove the jquery dependency. I found this solution does the job, is light, and understandable. So it’s exactly what I need, except it has Jquery depencendy. DEMO

FULL CODE

$('.carousel .carousel-item').each(function() {
  var minPerSlide = 4;
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  for (var i = 0; i < minPerSlide; i++) {
    next = next.next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});
@media (min-width: 768px) {
  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(50%);
  }
  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-50%);
  }
}

@media (min-width: 992px) {
  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(33%);
  }
  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-33%);
  }
}

@media (max-width: 768px) {
  .carousel-inner .carousel-item>div {
    display: none;
  }
  .carousel-inner .carousel-item>div:first-child {
    display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">


<div class="container text-center">
  <div class="row mx-auto my-auto">
    <div id="myCarousel" class="carousel slide carousel-dark w-100" data-bs-ride="carousel" data-bs-interval="2000">
      <div class="carousel-inner w-100" role="listbox">
        <div class="carousel-item active">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=1">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=2">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=3">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=4">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=5">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=6">
          </div>
        </div>
      </div>
      <a class="carousel-control-prev bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

Answer

Converted version

const minPerSlide = 4;
const parent = document.querySelector(".carousel-inner");

document.querySelectorAll('.carousel-item').forEach(function(item) {
  let next = item.nextElementSibling;
  if (!next) {
    next = parent.querySelector(".carousel-item");
  }
  let clone = next.querySelector("div").cloneNode(true);
  item.appendChild(clone)

  for (var i = 0; i < minPerSlide; i++) {
    next = next.nextElementSibling;
    if (!next) {
      next = parent.querySelector(".carousel-item");
    }
    clone = next.querySelector("div").cloneNode(true);
    item.appendChild(clone)
  }
});
@media (min-width: 768px) {
  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(50%);
  }
  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-50%);
  }
}

@media (min-width: 992px) {
  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(33%);
  }
  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-33%);
  }
}

@media (max-width: 768px) {
  .carousel-inner .carousel-item>div {
    display: none;
  }
  .carousel-inner .carousel-item>div:first-child {
    display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div class="container text-center">
  <div class="row mx-auto my-auto">
    <div id="myCarousel" class="carousel slide carousel-dark w-100" data-bs-ride="carousel" data-bs-interval="2000">
      <div class="carousel-inner w-100" role="listbox">
        <div class="carousel-item active">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=1">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=2">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=3">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=4">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=5">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=6">
          </div>
        </div>
      </div>
      <a class="carousel-control-prev bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

Fork of the code you posted first

https://www.codeply.com/p/TN7RystIwU

Leave a Reply

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