Modern Swipeable Image Carousel In Pure JavaScript

Preview:

Description:

A modern, responsive, performant, mobile-friendly carousel component that enables you to rotate through images via mouse drag and touch gestures or by pressing prev/next buttons.

How to use it:

1. Load the necessary JavaScript and CSS files in the HTML.

<link rel="stylesheet" href="styles.css" />
<script src="script.js" defer></script>
<script src="slider.js"></script>

2.  Add images to the carousel and done.

<div class="sliderContainer">
  <!-- Navigation Controls -->
  <div class="controls">
    <div class="prev-button">
      <div class="arrow"></div>
      <p>Previous</p>
      <div class="arrow hoverArrow"></div>
    </div>
    <div class="next-button">
      <div class="arrow hoverArrow"></div>
      <p>Next</p>
      <div class="arrow"></div>
    </div>
  </div>
  <!-- Images -->
  <div class="slider">
    <div>
      <img width="525" height="700" alt="Image Alt" src="https://source.unsplash.com/C7tw8GLcVzc/525x700" />
    </div>
    <div>
      <img width="525" height="700" alt="Image Alt" src="https://source.unsplash.com/Z8VEjf_-cPM/525x700" />
    </div>
    <div>
      <img width="525" height="700" alt="Image Alt" src="https://source.unsplash.com/-9CaPVaNUF8/525x700" />
    </div>
  </div>
</div>

3. The carousel also supports image lazy load for better performance.

<div>
  <img class="lazy"
       width="525"
       height="700"
       src="placeholder.jpg"
       data-src="orginal.jpg"
       alt="Image Alt"
    />
   <noscript>
    <img width="525" height="700" alt="Image Alt" src="orginal.jpg" />
  </noscript>
</div>