Carousel Bootstrap 5: JQuery to Javascript

Question

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/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/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>

The example you give is using bootstrap `.on('slide.bs.carousel')`. You would need to convert that framework too — mplungjan, Mar 15 '21 at 13:10
(offtopic with UX concerns) That example seems just like a really bad example on how to make a carousel... — Roko C. Buljan, Mar 15 '21 at 13:12

mplungjan · Accepted Answer · 2021-11-07T11:55:09.417

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/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/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="https://via.placeholder.com/350x180?text=1">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://via.placeholder.com/350x180?text=2">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://via.placeholder.com/350x180?text=3">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://via.placeholder.com/350x180?text=4">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://via.placeholder.com/350x180?text=5">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://via.placeholder.com/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>

This is exactly what I meant. Now I have to integrate it with Bootstrap 5, because codeply example had bootstrap 4 as basis framework. The only problem I see with this solution is that when the last two slides are shown, it doesnt shows the proper slides. I bet its related with if (!next.length) { next = $(this).siblings(':first'); } on the original code, what do you think? I would to thank you for helping me — Happy Development, Mar 15 '21 at 14:54
Can you show me a codeply with bootstrap 5? The codeply you posted does not have the `if (!next.length) { next = $(this).siblings(':first'); }` code in it — mplungjan, Mar 15 '21 at 15:52
DEMO: https://www.jqueryscript.net/demo/responsive-bootstrap-carousel-multiple-items/ — Happy Development, Mar 15 '21 at 16:05
This works like a charm, and now the comunity can enjoy a fantastic bootstrap 5 carousel with multiple items and slide one at time, and... without jquery dependency. :) Thank you so much for you effort and fast responding, this is an example of how good the comunity is. Thanks again. — Happy Development, Mar 15 '21 at 18:21

Carousel Bootstrap 5: JQuery to Javascript

1 Answers1