Creating Swipeable Image Carousel | slider-cut

image-carousel-slider-cut-js

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


See Demo And Download

Official Website(Robincredible): Click Here

This superior jQuery/javascript plugin is developed by Robincredible. For extra Advanced usage, please go to the official website.