Flipping Cards Carousel

Deep Blue
Sea
1

0

Lorem ipsum
4

Read More

1

Lorem ipsum
7

Read More

2

Lorem ipsum
10

Read More

3

Lorem ipsum
13

Read More

4

Northern
Lights
2

Read More

Lorem ipsum
5

Read More

Lorem ipsum
8

Read More

Lorem ipsum
11

Read More

Lorem ipsum
14

Read More

Over The
Mountains
3

Read More

Lorem ipsum
6

Read More

Lorem ipsum
9

Read More

Lorem ipsum
12

Read More

Lorem ipsum
15

Read More

Configuration

Number of decks of cards to show:

Number of decks:





ms


px

px px

ms

Rotation mode:

ms



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>


Options

  • autoflip-mode : [true | false] - start flipping in automatic mode
  • autoflip-delay : [ms] - delay before the next set of cards in automatic mode [ms]
  • mouseover-pause : [true | false] - pausing to flip when you hover over the cards

  • shadow : [true | false] - on/off shadow
  • transition-duration : [ms] - card flip transition duration

  • rotation-mode : [simultaneous | sequential] - simultaneous or sequential mode
  • sequential-delay : [ms] - sequential delay before neighboring cards flip

  • card-width : [px] - Card width
  • card-height : [px] - Card height

  • spacing-horizontal : [px] - Horizontal cards spacing
  • spacing-vertical : [px] - Vertical cards spacing

  • cards-per-row : [num] - Number of cards per row
  • number-of-rows : [num] - Number of rows

  • starting-number : [num] - Starting card number