This time I will share jQuery Plugin and tutorial about Simple Background Carousel Plugin with jQuery and Animate.css – Crosscover, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet"href="path/to/crosscover.css"> |
2 |
<link href="path/to/animate.min.css"> |
2. Add a list of image to the carousel / slideshow.
1 |
<div class="crosscover"> |
2 |
<ul class="crosscover-list"> |
3 |
<li><img src="1.jpg" alt="image01"></li> |
4 |
<li><img src="2.jpg" alt="image02"></li> |
5 |
<li><img src="3.jpg" alt="image03"></li> |
3. Add jQuery library and the jQuery crosscover.js script at the bottom of the document.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="path/to/crosscover.js"></script> |
4. Initialize the plugin with default options.
1 |
$(".crosscover").crosscover(); |
5. Optional settings to customize your background carousel / slideshow.
03 |
animateInClass:'fade-in', |
04 |
animateOutClass:'fade-out', |
19 |
controllerClass: 'crosscover-controller', |
20 |
prevClass: 'crosscover-prev', |
21 |
nextClass: 'crosscover-next', |
22 |
playerClass: 'crosscover-player', |
23 |
playerActiveClass: 'is-playing', |
24 |
playerInnerHtml: '<span class="crosscover-icon-player"></span>', |
25 |
prevInnerHtml: '<span class="crosscover-icon-prev"></span>', |
26 |
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)
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.
