Author: | and4nte |
---|---|
Views Total: | 635 views |
Official Page: | Go to website |
Last Update: | February 27, 2023 |
License: | MIT |
Preview:

Description:
A responsive and mobile-friendly carousel/slider that supports both mouse and touch gestures for seamless navigation. Written in Vanilla JavaScript and without any 3rd-party libraries.
How to use it:
1. Add images to the slider.
<div id="example"> <div class="slider-container"> <div class="slider-wrapper"> <div class="slide-item"> <img src="1.jpg" alt="image1" /> </div> <div class="slide-item"> <img src="2.jpg" alt="image2" /> </div> <div class="slide-item"> <img src="3.jpg" alt="image3" /> </div> ... more images here </div> </div> </div>
2. Load the main script ‘slider.js’ at the end of the document.
<script defer type="text/javascript" src="js/slider.js"></script>
3. The example slider styles.
#example { display: flex; flex-direction: column; margin: 1rem 0 5rem; width: 100%; height: 100%; } .slider-container { position: relative; width: 100%; max-height: 100%; overflow: hidden; touch-action: pan-x; } .slider-wrapper { position: relative; display: flex; } .slide-item { position: relative; } .slide-item { display: block; } .active.is-link { cursor: pointer; } .active a { pointer-events: none; }
4. Config the slider.
const options = { containerWidth: 700, itemWidth: 700, transform: '0.25s ease', };