Responsive Banner/Card Slider For All Devices

A responsive and modern banner/card slider script that can be used to display images, videos, or content in a visually appealing way. The slider was built with modern web standards, so it looks good on all devices: desktops, tablets, and mobile devices.

How to use it:

1. Load the ionicon library for navigation icons.

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

2. Load the main JavaScript and Stylesheet in the document.

<link rel="stylesheet" href="./style.css" />
<script src="./script.js"></script>

3. Create a banner slider (one image per view).

<div class="slider banner-slider" data-slider>
  <div class="slider-container" data-slider-container>
    <!-- Items -->
    <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>
  <!-- Controls -->
  <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>

4. Create a card slider (multiple items per view).

<div class="slider card-slider" data-slider>
  <div class="slider-container" data-slider-container>
    <!-- Items -->
    <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>
  <!-- Controls -->
  <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>