index.html

<!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>Pure JavaScript Slider</title>

  <!-- 
    - custom js link
  -->
  <link rel="stylesheet" href="./style.css">

</head>

<body>

  <div class="container">

    <div class="slider banner-slider" data-slider>

      <div class="slider-container" data-slider-container>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 1000; --height: 560;">
            <img src="./images/movie-wide-1.jpg" width="1000" height="560" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 1000; --height: 560;">
            <img src="./images/movie-wide-2.jpg" width="1000" height="560" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 1000; --height: 560;">
            <img src="./images/movie-wide-3.jpg" width="1000" height="560" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 1000; --height: 560;">
            <img src="./images/movie-wide-4.jpg" width="1000" height="560" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 1000; --height: 560;">
            <img src="./images/movie-wide-5.jpg" width="1000" height="560" alt="" class="img-cover">
          </div>
        </div>

      </div>

      <button class="btn-icon slider-control prev" data-slider-prev>
        <ion-icon name="arrow-back-sharp"></ion-icon>
      </button>

      <button class="btn-icon slider-control next" data-slider-next>
        <ion-icon name="arrow-forward-sharp"></ion-icon>
      </button>

    </div>

    <div class="slider card-slider" data-slider>

      <div class="slider-container" data-slider-container>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-01.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-02.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-03.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-04.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-05.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-06.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

      </div>

      <button class="btn-icon slider-control prev" data-slider-prev>
        <ion-icon name="arrow-back-sharp"></ion-icon>
      </button>

      <button class="btn-icon slider-control next" data-slider-next>
        <ion-icon name="arrow-forward-sharp"></ion-icon>
      </button>

    </div>

    <div class="slider card-slider" data-slider>

      <div class="slider-container" data-slider-container>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-07.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-08.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-09.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-10.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-11.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

      </div>

      <button class="btn-icon slider-control prev" data-slider-prev>
        <ion-icon name="arrow-back-sharp"></ion-icon>
      </button>

      <button class="btn-icon slider-control next" data-slider-next>
        <ion-icon name="arrow-forward-sharp"></ion-icon>
      </button>

    </div>

    <div class="slider card-slider" data-slider>

      <div class="slider-container" data-slider-container>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-12.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-13.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

        <div class="slider-item">
          <div class="card img-holder" style="--width: 500; --height: 750;">
            <img src="./images/movie-14.jpg" width="500" height="750" alt="" class="img-cover">
          </div>
        </div>

      </div>

      <button class="btn-icon slider-control prev" data-slider-prev>
        <ion-icon name="arrow-back-sharp"></ion-icon>
      </button>

      <button class="btn-icon slider-control next" data-slider-next>
        <ion-icon name="arrow-forward-sharp"></ion-icon>
      </button>

    </div>

  </div>


  <!-- 
    - custom js link
  -->
  <script src="./script.js"></script>

  <!-- 
    - ionicon
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>