Crosscover

Carousel of a simple background image using jquery and animate.css.

Download on GitHub

  • image01
  • image02
  • image03
  • image04
  • image05
  • Demonstration

    Installation

    npm

    npm install crosscover
    

    Bower

    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.