Responsive Content Slider Plugin with jQuery and Animate.css

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.