Minimal Draggable Swipeable Image Carousel/Slider In Vanilla JavaScript

Preview:

Description:

A responsive and mobile-friendly carousel/slider that supports both mouse and touch gestures for seamless navigation. Written in Vanilla JavaScript and without any 3rd-party libraries.

How to use it:

1.  Add images to the slider.

<div id="example">
  <div class="slider-container">
    <div class="slider-wrapper">
      <div class="slide-item">
        <img src="1.jpg" alt="image1" />
      </div>
      <div class="slide-item">
        <img src="2.jpg" alt="image2" />
      </div>
      <div class="slide-item">
        <img src="3.jpg" alt="image3" />
      </div>
      ... more images here
    </div>
  </div>
</div>

2. Load the main script ‘slider.js’ at the end of the document.

<script defer type="text/javascript" src="js/slider.js"></script>

3. The example slider styles.

#example {
  display: flex;
  flex-direction: column;
  margin: 1rem 0 5rem;
  width: 100%;
  height: 100%;
}
.slider-container {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  touch-action: pan-x;
}
.slider-wrapper {
  position: relative;
  display: flex;
}
.slide-item {
  position: relative;
}
.slide-item {
  display: block;
}
.active.is-link {
  cursor: pointer;
}
.active a {
  pointer-events: none;
}

4. Config the slider.

const options = {
  containerWidth: 700,
  itemWidth: 700,
  transform: '0.25s ease',
};