Responsive Content Slider Plugin with jQuery and Animate.css
File Size: | 881 KB |
---|---|
Views Total: | 1484 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A simple, lightweight, responsive, automatic jQuery html content & image slider that uses animate.css for awesome slide transition effects.
How to use it:
1. Load the required animate.css from a CDN.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
2. Load jQuery library and the jQuery jcSlider.js script in the webpage.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="js/jcSlider.js"></script>
3. Create a list of html content or images for the slider.
<ul class="jc-slider"> <li class="jc-animation"> Slide One </li> <li class="jc-animation"> Slide Two </li> <li class="jc-animation"> Slide Three </li> </ul>
4. The basic slider styles.
.jc-slider{ overflow: hidden; width:100%; } .jc-slider *{ box-sizing:border-box; }
5. Call the function on the top element and specify the animations you want to use. All the animations can be found in animate.css official website.
$('.jc-slider').jcSlider({ animationIn: "bounceInRight", animationOut: "bounceOutLeft", stopOnHover: true, loop: false });
Change logs:
2015-07-20
- add overflow hidden
2015-07-03
- add loop option
- add more examples
2015-06-27
- Update jquery.jcslider.js
This awesome jQuery plugin is developed by JoanClaret. For more Advanced Usages, please check the demo page or visit the official website.