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

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>
  </ul>
</div>

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

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="path/to/crosscover.js"></script>

4. Initialize the plugin with default options.

$(".crosscover").crosscover();

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

// animation classes
// reference to https://daneden.github.io/animate.css/ for more information
animateInClass:'fade-in',
animateOutClass:'fade-out',

// 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:

v1.1.0(2016-12-05)

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

v1.0.2(2015-09-05)

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