Basic Draggable Slider With Pure JavaScript

Preview:

Description:

A basic responsive draggable slider built with JavaScript and CSS grid layout.

How to use 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 main JavaScript file app.js on the page.

<script src="app.js"></script>

3. The example 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%;
}