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
   
CSS3 Powered Responsive Carousel Plugin For jQuery - easySlider.js

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.