Author: | codewithsadee |
---|---|
Views Total: | 372 views |
Official Page: | Go to website |
Last Update: | November 18, 2022 |
License: | MIT |
Preview:

Description:
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>