Bootstrap 4 Carousel

0 2321

The carousel also is known as the slideshow for cycling through a series of content built with CSS 3D transforms and JavaScript code. It is a dynamic presentation of series of images, series of text, or custom markup.

The carousel has so many functions, like previous/next controls and indicators.

How to create a Carousel:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Carousel Slide Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
    #sideshow-demo
    {
      width: 50%;
    }
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>
</head>
<body>
<div id="sideshow-demo" class="carousel slide" data-ride="carousel">
  <!-- used for Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#sideshow-demo" data-slide-to="0" class="active"></li>
    <li data-target="#sideshow-demo" data-slide-to="1"></li>
    <li data-target="#sideshow-demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="images/webdesign-html-php.jpg" alt="Codingtag html">
    </div>
    <div class="carousel-item">
     <img src="images/bootstrap-4.jpg" alt="Codingtag php">
    </div>
    <div class="carousel-item">
   <img src="images/bootstrap-4-2.jpg" alt="Codingtag bootstrap">
    </div>
  </div>
  <!-- used for Left and right controls -->
  <a class="carousel-control-prev" href="#sideshow-demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#sideshow-demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
</body>
</html>

Output:

Class Description:

We have used some classes in the above code that way we discussed.

.carousel	this class used to create a carousel
.carousel-indicators	this class used to adds indicators for the carousel. These are the little dots at the bottom of each slide, which indicates how many slides there are in the carousel, and it indicates which slide the user is currently viewing.
.carousel-inner	you must add slides items inside to the carousel.
.carousel-item	it tells about the content of each slide.
.carousel-control-prev	it defines a left (previous) button to the carousel, which allows the user to go back between the slides them.
.carousel-control-next	it defines a right (next) button to the carousel, which allows the user to go forward between the slides them.
.carousel-control-prev-icon	this class used together with .carousel-control-prev to create a "previous" button
.carousel-control-next-icon	this class used together with .carousel-control-next to create a "next" button
.slide	this class used to Adds a CSS transition and animation effect when sliding from one item to the next item. You can remove this class if you do not want this effect.