Flipping Cards Carousel

How to use

Usage with pure JavaScript:

    <link href="css/flipping.css" rel="stylesheet"/>
    <script src="js/flipping.js"/>
    ...
    <div id="flippingcards" class="flipping">

        <div>
            <button>&#9668;</button>
        </div>

        <div class="card-box">

            <div class="card-deck">
                <div>
                    <h2>Deep Blue <br>Sea</h2>
                    <img src="images/1.jpg"/>
                </div>
                <div><img src="images/4.jpg"/></div>
                <div><img src="images/7.jpg"/></div>
                <div><img src="images/10.jpg"/></div>
                <div><img src="images/13.jpg"/></div>
            </div>

        ...
        </div>

        <div>
            <button>&#9658;</button>
        </div>

    </div>

    
    <script>

        var options = {

            "autoflip-mode": false,
            "autoflip-delay": 1500,
            "mouseover-pause": true,

            "shadow": true,

            "transition-duration": 700,

            "rotation-mode": "sequential",
            "sequential-delay": 600,

            "card-width": 250,
            "card-height": 280,

            "spacing-horizontal": 15,
            "spacing-vertical": 15,

            "cards-per-row": 3,

            "starting-number": 1

        };

        flipping.init('flippingcards', options);

    </script>