Creating Swipeable Image Carousel | slider-cut

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

See Demo And Download