Create a Draggable Slider Using Vanilla JavaScript

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

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 Usage, please go to the official website.

Share