Hello….Welcome to sknetking ….. In today's blog we are creating Bootstrap Slider with bootstrap5. It is an image slideshow that represents multiple images. It is autoplaying image slider. So Let start to create image slider before that you see the live server which is given here…

You can set options -- 
   var myCarousel = document.querySelector(".carousel");
          var carousel = new bootstrap.Carousel(myCarousel, {
            interval: 1000,
            wrap: true, //infinity loop
            pause: "hover",
            ride: true, //auto play on off
            touch: true //scroll with touch
          });

  
  <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">  </button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3" ></button>
  </div>
    
  <div class="carousel-inner">
    
    
    <div class="carousel-item active">
      <img src="https://cdn.pixabay.com/photo/2022/11/25/16/30/brown-hairstreak-7616422_960_720.jpg" class="d-block w-100" alt="...">
  </div>
    <div class="carousel-item">
      <img src="https://cdn.pixabay.com/photo/2021/07/28/19/02/macroperspective-6503067_960_720.jpg" class="d-block w-100" alt="...">
    </div>
    
    <div class="carousel-item ">
      <img src="https://cdn.pixabay.com/photo/2021/08/23/01/26/snowflake-6566453_960_720.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
   </div>
  
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon prevBtn" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon nextBtn" aria-hidden="true"></span>
    <span class="visually-hidden bg-dark">Next</span>
  </button>
</div>
<script>
   var myCarousel = document.querySelector(".carousel");
          var carousel = new bootstrap.Carousel(myCarousel, {
            interval: 1000,
            wrap: true, //infinity loop
            pause: "hover",
            ride: true, //auto play on off
            touch: true //scroll with touch
          });

</script>

How to create a custom slider with lightslider many options.

tag = custom slider in wordpress,acf slider,elementor video slider,video carousel wordpress,video slider elementor,divi video slider,smart slider video,elementor video carousel,video slider wordpress plugin;