Crosscover – Beautiful carousel with jQuery and animate.css

Since animate.css was released the World Wide Web become a bit more entertaining and beautiful. The animated library has been used to present content in more interesting way or enhance CTA actions.

Crosscover is a lovely plugin that takes advantage of the popular animation library in a beautiful carousel with a little bit of jQuery.

This carousel plugin is easy to implement and work with. What’s more you can change animations from time to time to lift up your website. You can choose from 21 animations that are featured in animate.css such as fade, zoom, rotate, flip and lightspeed.

Image may be NSFW.
Clik here to view.

DEMO Download

Let’s have a look at the steps you need to perform in order to have a beautiful Crosscover carousel.

Step #1 – Link the required files

<!-- animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
<!-- crosscover.css -->
<link rel="stylesheet" href="./dist/css/crosscover.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!-- crosscover.js -->
<script src="./dist/js/crosscover.min.js"></script>

Step #2 – Add the HTML Markup

<div class="crosscover">
  <div class="crosscover-overlay">
   <div class="crosscover-island">
      <h1 class="crosscover-title">...</h1>
      <h2 class="crosscover-description">...</h2>
    </div>
  </div>
  <ul class="crosscover-list">
    <li><img src="./images/01.jpg" alt="image01"/></li>
    <li><img src="./images/02.jpg" alt="image02"/></li>
    <li><img src="./images/03.jpg" alt="image03"/></li>
    <li><img src="./images/04.jpg" alt="image04"/></li>
   <li><img src="./images/05.jpg" alt="image05"/></li>
  </ul>
</div>

Step #3 – Call the Crosscover

$(".crosscover").crosscover({
animateInClass:'fade-in',
animateOutClass:'fade-out',
interval : 5000,
startIndex : 0,
autoPlay : true,
controller : true,
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>'
});

As you can see at the piece of code above, you can choose the animation type, the interval and other options.

It is important to know that Crosscover requires a browser that supports CSS3.

DEMO Download

For more information or if you want to fork the project, you can head over to GitHub.