Demonstration

Installation

npm install crosscover

bower install crosscover

Step 1: Link required files

1. jQuery   Created by jQuery Foundation and other contributors.
2. animate.css  Created by Daniel Eden.
3. crosscover

<!-- 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: HTML markup

<div class="crosscover">

    <!-- Overlay
    <div class="crosscover-overlay">
        <div class="crosscover-island">
            <h1 class="crosscover-title">...</h1>
            <h2 class="crosscover-description">...</h2>
        </div>
    </div>
    -->

  <div class="crosscover-list">
    <a class="crosscover-item" href="http://blivesta.com">
            <img src="./images/01.jpg" alt="image01"/>
        </a>
    <div class="crosscover-item">
            <img src="./images/02.jpg" alt="image02"/>
        </div>
    <div class="crosscover-item">
            <img src="./images/03.jpg" alt="image03"/>
        </div>
  </div>

</div>

Step 3: Call the Crosscover

$(".crosscover").crosscover({
    inClass: 'fade-in',
    outClass: 'fade-out',
    interval: 5000,
    startIndex: 0,
    autoPlay: true,
    dotsNav: true,
    controller: false,
    controllerClass: 'crosscover-controller',
    prevClass: 'crosscover-prev',
    nextClass: 'crosscover-next',
    playerClass: 'crosscover-player',
    playerInnerHtml: '<span class="crosscover-icon-player"></span>',
    prevInnerHtml: '<span class="crosscover-icon-prev"></span>',
    nextInnerHtml: '<span class="crosscover-icon-next"></span>'
});

Browser support

Requires a browser that supports CSS3.

• IE10+
• Safari
• Chrome
• Firefox