Press "Enter" to skip to content

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

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *