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.