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
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="//">

2. Load jQuery library and the jQuery jcSlider.js script in the webpage.

<script src="//"></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 class="jc-animation">
    Slide Two
  <li class="jc-animation">
    Slide Three

4. The basic slider styles.

  overflow: hidden;

.jc-slider *{

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.

  animationIn: "bounceInRight",
  animationOut: "bounceOutLeft",
  stopOnHover: true,
  loop: false

Change logs:


  • add overflow hidden


  • add loop option
  • add more examples


  • 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.