Bootstrap 4 Carousel || How to create Carousel
×

Bootstrap 4 Carousel

0 445

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:

Bootstrap 4 Carousel

Class Description:

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

.carouselthis class used to create a carousel
.carousel-indicatorsthis 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-inneryou must add slides items inside to the carousel.
.carousel-itemit tells about the content of each slide.
.carousel-control-previt defines a left (previous) button to the carousel, which allows the user to go back between the slides them.
.carousel-control-nextit defines a right (next) button to the carousel, which allows the user to go forward between the slides them.
.carousel-control-prev-iconthis 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
.slidethis 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.



Share:


Leave a Reply


Comments
    Waiting for your comments