bootstrap 4 carousel how to active transitions? – Jquery

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();
}