Simple Background Carousel Plugin with jQuery and Animate.css - Crosscover

Simple Background Carousel Plugin with jQuery and Animate.css - Crosscover
File Size: 23.9 KB
Views Total: 4785
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Crosscover is a small jQuery plugin for creating a image carousel / slideshow with smooth CSS3 transition effects based on Animate.css.

How to use it:

1. Add the necessary Animate.css and crosscover.css in the head section of the document.

<link rel="stylesheet"href="path/to/crosscover.css">
<link href="path/to/animate.min.css">

2. Add a list of image to the carousel / slideshow.

<div class="crosscover">
  <ul class="crosscover-list">
    <li><img src="1.jpg" alt="image01"></li>
    <li><img src="2.jpg" alt="image02"></li>
    <li><img src="3.jpg" alt="image03"></li>

3. Add jQuery library and the jQuery crosscover.js script at the bottom of the document.

<script src="//"></script>
<script src="path/to/crosscover.js"></script>

4. Initialize the plugin with default options.


5. Optional settings to customize your background carousel / slideshow.

// animation classes
// reference to for more information

// transition delay
interval : 5000,

// init slide
startIndex : 0,

// enable autoplay
autoPlay : true,

// display controls
controller: true,

// CSS selectors
controllerClass: 'crosscover-controller',
prevClass: 'crosscover-prev',
nextClass: 'crosscover-next',
playerClass: 'crosscover-player',
playerActiveClass: 'is-playing',
playerInnerHtml: '<span class="crosscover-icon-player"></span>',
prevInnerHtml: '<span class="crosscover-icon-prev"></span>',
nextInnerHtml: '<span class="crosscover-icon-next"></span>'

Change logs:


  • Improved to pause the slide when the tab of the browser is out of focus


  • fix css for html,body elements

v0.3.1 (2015-08-09)

  • tweaks

v0.2.0 (2015-08-09)

  • refactor for animationend callback

v0.1.0 (2015-08-07)

  • add overlay and icons styles

This awesome jQuery plugin is developed by blivesta. For more Advanced Usages, please check the demo page or visit the official website.