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

Download on GitHub

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



    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="">
    <!-- crosscover.css -->
    <link rel="stylesheet" href="./dist/css/crosscover.min.css">
    <!-- jQuery -->
    <script src=""></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 class="crosscover-list">
        <a class="crosscover-item" href="">
                <img src="./images/01.jpg" alt="image01"/>
        <div class="crosscover-item">
                <img src="./images/02.jpg" alt="image02"/>
        <div class="crosscover-item">
                <img src="./images/03.jpg" alt="image03"/>

    Step 3: Call the 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.