Draggable-Slider is a responsive drag slider built with JavaScript and CSS grid layout.
vanilla js slider, simple pure javascript image slider, mouse drag slider javascript, draggable slider, javascript product slider, draggable slider javascript
Full-Size Drag-and-Drop Draggable Event Calendar Plugin | fullcalendar
How to make use of it:
1. Add slides to the slider.
<div class="slider"> <div class="slider-inner"> <div class="slide"> <div class="slide__img slide__img--1"></div> </div> <div class="slide"> <div class="slide__img slide__img--2"></div> </div> <div class="slide"> <div class="slide__img slide__img--3"></div> </div> <div class="slide"> <div class="slide__img slide__img--4"></div> </div> <div class="slide"> <div class="slide__img slide__img--5"></div> </div> ... </div> </div>
2. Include the primary JavaScript file app.js
on the web page.
<script src="app.js"></script>
3. The instance CSS styles for the slider.
slider { position: absolute; left: 10%; top: 30%; width: 80%; height: 20vh; overflow: hidden; } .slider-inner { position: absolute; left: 0; top: 0; height: 100%; width: 200%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.5rem; pointer-events: none; transition: 0s ease-in; } .slide { height: 100%; } .slide__img { width: 100%; height: 100%; }
Basic Draggable Slider Plugin/Githu, javascript slider, pure js carousel
See Demo And Download
Official Website(designsbyharp): Click Here
This superior jQuery/javascript plugin is developed by designsbyharp. For extra Advanced Usages, please go to the official website.
Be First to Comment