Easy Responsive Image Carousel & Slider Plugin - jQuery SkySlider
File Size: | 19.4 KB |
---|---|
Views Total: | 5532 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

SkySlider is a small and simple-to-use jQuery plugin to create a fully responsive image carousel or slider that features infinite loop, auto play, callback function, custom animation speed and more.
Available modes:
- Slider: crossfading effect.
- Carousel: horizontal scrolling.
How to use it:
1. Import jQuery library together with the SkySlider plugin's files into the html file.
<link href="css/slider.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="js/slider.js">
2. Add your images together with caption text and navigation controls to the slider/carousel.
<div class="slider demo" id="slider"> <div class="slider_viewport"> <div class="slider_list"> <div class="slider_item"> <div class="slider_item-content">Caption 1</div> <img src="1.jpg"/> </div> <div class="slider_item"> <div class="slider_item-content">Caption 2</div> <img src="2.jpg"/> </div> <div class="slider_item"> <div class="slider_item-content">Caption 3</div> <img src="3.jpg"/> </div> <div class="slider_item"> <div class="slider_item-content">Caption 4</div> <img src="4.jpg"/> </div> </div> </div> <div class="slider_nav"> <div class="slider_arrow slider_arrow__left"> </div> <div class="slider_arrow slider_arrow__right"> </div> </div> </div>
3. Initialize the plugin to create a basic image sldier.
$('#slider').skySlider();
4. Initialize the plugin as an image carousel.
$('#slider').skySlider({ carousel: true });
5. Set the interval and duration in milliseconds.
$('#slider').skySlider({ interval: 3000, duration: 500 });
6. Specify the number of images to show per slide.
$('#slider').skySlider({ items: 2 // default: 1 });
7. Enable/disable the autoplay functionality.
$('#slider').skySlider({ autoplay: true // default: false });
8. Enable/disable the infinite loop functionality.
$('#slider').skySlider({ loop: false // default: true });
9. Get the current slide index.
$('#slider').skySlider({ callback: function(number) { console.log('Current slideSet - ' + number); } });
10. Get the total number of slides.
$('#slider').getSlideSetsCount();
This awesome jQuery plugin is developed by skyangelzp. For more Advanced Usages, please check the demo page or visit the official website.