CSS3 Powered Responsive Carousel Plugin For jQuery - easySlider.js
File Size: | 16.4 KB |
---|---|
Views Total: | 2008 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
easySlider.js is a very small jQuery slider plugin for generating a responsive carousel from an array of images, with support for CSS3 animations and auto rotation.
How to use it:
1. To get started, make sure you include jQuery library in the web page before ymy.slider.full.js
. Also make sure you reference ymy.slider.full.css
in the head
section.
<link rel="stylesheet" href="ymy.slider.full.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="ymy.slider.full.js"></script>
2. Create a DIV element that will be served as the container for the carousel.
<div class="mySlider"> </div>
3. Define an array of images to be presented in the slider.
let imgs = [ '1.jpg', '2.jpg', '3.jpg', ]
4. Initialize the carousel and you're done.
$('.box').easySlider({ imgs: imgs })
5. Set the animation speed (in seconds) when transitioning between images.
$('.box').easySlider({ duration: 1 })
6. Specify how long images show before switching to the next slide.
$('.box').easySlider({ stay: 3 })
This awesome jQuery plugin is developed by yumengyuan0825. For more Advanced Usages, please check the demo page or visit the official website.