Author: | raphpion |
---|---|
Views Total: | 1,017 views |
Official Page: | Go to website |
Last Update: | April 21, 2022 |
License: | MIT |
Preview:

Description:
This is a draggable, swipeable, mobile-friendly, full-width slider component written in vanilla JavaScript.
This component is compatible with all major browsers and doesn’t rely on jQuery or any other 3rd party libraries.
How to use it:
1. Load the Draggable Slider’s JavaScript and CSS files.
<link rel="stylesheet" href="draggable-slider.css" /> <script src="draggable-slider.js"></script>
2. Add as many slides to the draggable slider.
<div id="example" class="draggable-slider"> <div class="inner"> <div class="slide">Slide 1</div> <div class="slide">Slide 2</div> <div class="slide">Slide 3</div> ... more slides here ... </div> </div>
3. Initialize the draggable slider.
const mySlider = new DraggableSlider('example');
4. Override the default styles of the slides.
.draggable-slider .inner .slide { width: 50vw; height: 100%; } .draggable-slider .inner > div:nth-of-type(even) { background: rgb(62, 123, 255, 0.3); } .draggable-slider .inner > div:nth-of-type(odd) { background: rgb(105, 255, 110, 0.3); } .draggable-slider .inner > div:nth-of-type(even).active { background: rgb(62, 123, 255, 1); } .draggable-slider .inner > div:nth-of-type(odd).active { background: rgb(105, 255, 110, 1); }
5. Override the default CSS selectors of the draggable slider.
const mySlider = new DraggableSlider('example', 'innerClass', 'sliderClass');