Creating Swipeable Image Carousel | slider-cut

slider-cut is a modern, responsive, effective, and easy-to-use mobile circular component that enables you to rotate through images by mouse drag and touch gestures or by pressing the previous/next buttons.

pure javascript carousel, carousel slider pure javascript, simple javascript carousel, simple pure javascript image slider, carousel html css javascript, automatic carousel html css javascript

How to make use of it:

1. Load the mandatory JavaScript and CSS information within the HTML.

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

2. Add photos to the carousel and accomplished.

<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 additionally helps picture lazy load for better efficiency.

<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>

Modern Swipeable Image Carousel, slider-cut Plugin/Github