how to create carousel using bootstrap

letskillsup

carousel  in bootstrap

how to create carousel using bootstrap







files required for carousel

1.css:bootstrap.min.css

2.js:bootstrap.bundle.min.js


classes required for carousel:

1. carousel

2. carousel-inner

4. carousel-item

5. active


classes used for carousel button

1. carousel-control-prev

2. carousel-control-next


attributes for carousel:


data-bs-ride="carousel": used for the main container(carousel)


data-bs-target="#id_of carousel": used for button 


data-bs-slide="prev": used for prev button


data-bs-slide="next":used for next button




<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="bootstrap.min.css" rel="stylesheet">

  <script src="bootstrap.bundle.min.js"></script>

</head>

<body>




<div id="cec" class="carousel slide" data-bs-ride="carousel" >


  <div class="carousel-inner" >

    <div class="carousel-item active" style="height:500px;">

      <img src="bg1.jpg" class="d-block w-100 " alt="bg1.jpg" style="height:100%;">

    </div>

    <div class="carousel-item" style="height:500px;">

      <img src="bg1.jpg" class="d-block w-100 " alt="bg1.jpg" style="height:100%;">

    </div>

    <div class="carousel-item" style="height:500px;">

      <img src="bg1.jpg" class="d-block w-100 " alt="bg1.jpg" style="height:100%;">

    </div>

  </div>



  <button class="carousel-control-prev" type="button" data-bs-target="#cec" data-bs-slide="prev">

    prev

  </button>


  <button class="carousel-control-next" type="button" data-bs-target="#cec" data-bs-slide="next">

    next

  </button>



</div>


</body>

</html>




1 Comments