Slider-JS is a standalone JavaScript library for creating a responsive and automatic touchscreen image slider. You can scroll through the images by swiping the mouse or by touching them.
infinite carousel javascript, infinite horizontal scroll javascript, infinite image slider javascript, infinite carousel slider
How to make use of it:
1. Load the “slider-js.css” style sheet into the document that provides the basic layout for the slider.
<link rel="stylesheet" href="css/slider-js.css">
2. Load the main JavaScript “slider-js.js” at the end of the document.
<script src="js/slider-js.js"></script>
3. Add images and slider controls to a web page.
<div class="sliderjs" data-width="100%" data-idBegin="0" data-duration="400" data-delay="2000"> <div class="sliderjs-viewport"> <ul class="sliderjs-canvas"> <li><img src="1.jpg" alt="Image Slider 1"></li> <li><img src="2.jpg" alt="Image Slider 2"></li> <li><img src="3.jpg" alt="Image Slider 3"></li> <li><img src="4.jpg" alt="Image Slider 4"></li> <li><img src="5.jpg" alt="Image Slider 5"></li> </ul> </div> <ul class="sliderjs-pag"> <li>slide 1</li> <li>slide 2</li> <li>slide 3</li> <li>slide 4</li> <li>slide 5</li> </ul> <ul class="sliderjs-nav"> <li class="sliderjs-prev">Previous</li> <li class="sliderjs-next">Next</li> </ul> </div>
infinite carousel vanilla javascript, Slider-JS Plugin/Github
See Demo And Download
Official Website(HaiBach): Click Here
This superior jQuery/javascript plugin is developed by HaiBach. For extra advanced usage, please go to the official website.