index.html

<!-- 
   Creator           : Coding's Time
   Youtube Channel   : https://www.youtube.com/channel/UC6dnKqrImGWqMb9ty1n0Ziw
   Github Profile    : https://github.com/codingstime
 -->

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Image Slider (Carousel) Part 2 | Coding's Time</title>

   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
   <link rel="stylesheet" href="./style.css">
</head>

<body>

   <div class="carousel">
      <div class="carousel_inner">
         <div class="carousel_item carousel_item__active">
            <img src="./img/image1.png" alt="" class="carousel_img">
            <div class="carousel_caption">
               <h1 class="carousel_title">Change It As You See Fit</h1>
               <p class="carousel_description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id cupiditate
                  corporis laudantium quae velit quam.</p>
            </div>
         </div>
         <div class="carousel_item">
            <img src="./img/image2.png" alt="" class="carousel_img">
         </div>
         <div class="carousel_item">
            <img src="./img/image3.png" alt="" class="carousel_img">
         </div>
      </div>

      <div class="carousel_indicator">
         <button class="carousel_dot carousel_dot__active"></button>
         <button class="carousel_dot"></button>
         <button class="carousel_dot"></button>
      </div>

      <div class="carousel_control">
         <button class="carousel_button carousel_button__prev">
            <i class="fas fa-chevron-left"></i>
         </button>
         <button class="carousel_button carousel_button__next">
            <i class="fas fa-chevron-right"></i>
         </button>
      </div>
   </div>

   <script src="./script.js"></script>
</body>

</html>