bootstrap 4 sliders | Carousel bootstrap

How does it work?

The carousel could be a slideshow for the sport through a series of content, designed with CSS 3D transforms and a touch of JavaScript. It works with a series of pictures, text, or custom markup. It additionally includes support for previous/next controls and indicators.

In browsers wherever the Page Visibility API is supported, the carousel can avoid slippery once the webpage isn’t visible to the user (such as once the browser tab is inactive, the browser window is reduced, etc.).

Please bear in mind that nested carousels aren’t supported, and carousels area units typically not compliant with accessibility standards.

Lastly, if you’re building our JavaScript from the supply, it needs util.js.

bootstrap 4 sliders

add bootstrap 4 CSS and js in your index.html file

Bootstrap 4 CDN link here

<!-----bootstrap 4 css------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!------jquery.js------>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!------popper.js------>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-----bootstrap.js------->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

How To Create a Slider in boostrap 4

Simple slider code Bootstrap 4

<div id="demo" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block" src="https://i.ibb.co/RpmmZ7s/html-slider-1.jpg" width="100%" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://i.ibb.co/WFjZZVS/html-slider-2.jpg" width="100%" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://i.ibb.co/cCwb0mg/html-slider-3.jpg" width="100%" alt="Third slide">
    </div>
  </div>
</div>

How To Create a Slider with text in boostrap 4

<div id="demo" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
   
  <div class="carousel-item active">
  <img class="d-block" src="https://i.ibb.co/RpmmZ7s/html-slider-1.jpg" width="100%" alt="First slide">
  <div class="carousel-caption d-none d-md-block">
    <h5>Big title</h5>
    <p>paragraph</p>
  </div>
</div>
  
  <div class="carousel-item ">
<img class="d-block" src="https://i.ibb.co/WFjZZVS/html-slider-2.jpg" width="100%" alt="Second slide">
  <div class="carousel-caption d-none d-md-block">
      <h5>Big title</h5>
    <p>paragraph</p>
  </div>
</div>
  
  <div class="carousel-item ">
      <img class="d-block" src="https://i.ibb.co/cCwb0mg/html-slider-3.jpg" width="100%" alt="Third slide">
  <div class="carousel-caption d-none d-md-block">
      <h5>Big title</h5>
    <p>paragraph</p>
  </div>
</div>
   
  </div>
   <a class="carousel-control-prev" href="#demo" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#demo" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Example:-