bootstrap 4 carousel how to active transitions?

Question

I have a Bootstrap 4 carousel and I need to move 4 slides each time. I'm using this code, and it works:

$(this).carousel(4);

The problem is that the carousel just jumps to that index and doesn't show any transitions. If I use $(this).carousel("next"); or $(this).carousel("prev"); it works and transitions correctly.

I tried use something like this:

$(this).carousel("next");
$(this).carousel("next");

But it does not work. Any help will be appreciated.

UPDATE

I found a workaround:

test = setInterval(() => {
  count++;
  $(".carousel-control-next").click();
  if (count > 3) {
    count = 0;
    clearInterval(test);
  }
}, 200);

I used an interval because the following does not work:

• $(".carousel-control-next").click() inside a loop, or
• $(".carousel-control-next").click() inside a setTimeout inside a loop

Answer 1

first of all you need to include the required JavaScript and CSS in your project, create the necessary HTML and use build in carousel class.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

link in the "head" and scripts in the end of "body". Then create the Carousel HTML using the carousel class and a unique IDs. The structure should include indicators, items, and nav controls:

<div id="myCarousel" class="carousel slide" data-ride="carousel">


<!-- Indic-->
  <ul class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ul>
  
  <!-- slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img1.jpg" alt="Image 1" width="100%" height="100%">
      <div class="carousel-caption">
        <h3>Image 1</h3>
        <p>Description 1</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="img2.jpg" alt="Image 2" width="100%" height="100%">
      <div class="carousel-caption">
        <h3>Image 2</h3>
        <p>Description 2</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="img3.jpg" alt="Image 3" width="100%" height="100%">
      <div class="carousel-caption">
        <h3>Image 3</h3>
        <p>Description 3</p>
      </div>
    </div>
  </div>
  
  <!-- Contr-->
  <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

Swap "img1.jpg", "img2.jpg", and "img3.jpg" with the your image paths or links (urls) you want to use. And last thing, activate the carousel, bootstrap automatically activates the it when the data-ride="carousel" attribute is added to the main Carousel div element. Also you can check more info here: carousel bootstrap docs.

Hope this helps and answers your question.

Almost forgot:

$(document).ready(function() {
  // Initialize the carousel
  $("#myCarousel").carousel({ interval: false });

  // Custom next function
  $(".carousel-control-next").click(function() {
    moveCarousel(4);
  });

  // Custom prev function
  $(".carousel-control-prev").click(function() {
    moveCarousel(-4);
  });

  // Move the carousel by the specified number of slides
  function moveCarousel(steps) {
    var currentIndex = $("#myCarousel .carousel-inner .carousel-item.active").index();
    var totalItems = $("#myCarousel .carousel-inner .carousel-item").length;

    var targetIndex = currentIndex + steps;
    if (targetIndex < 0) {
      targetIndex = 0;
    } else if (targetIndex >= totalItems) {
      targetIndex = totalItems - 1;
    }

    $("#myCarousel").carousel(targetIndex);
  }
});

To enable smooth transition effect modify code:

// Move the carousel by the specified number of slides
function moveCarousel(steps) {
  var currentIndex = $("#myCarousel .carousel-inner .carousel-item.active").index();
  var totalItems = $("#myCarousel .carousel-inner .carousel-item").length;
  var remainingSteps = steps;

  function moveOneStep() {
    var newIndex = currentIndex + (remainingSteps > 0 ? 1 : -1);
    if (newIndex < 0 || newIndex >= totalItems) {
      return;
    }

    $("#myCarousel").one("slid.bs.carousel", function() {
      remainingSteps -= (remainingSteps > 0 ? 1 : -1);
      if (remainingSteps !== 0) {
        moveOneStep();
      }
    });

    $("#myCarousel").carousel(newIndex);
    currentIndex = newIndex;
  }

  moveOneStep();
}