Flipping Cards Carousel
◄
Deep Blue
Sea
1
Read More
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:
1
2
3
4
5
6
Number of decks:
per row
rows
Starting card number:
1
2
3
4
5
Automatic flipping mode
Delay before the next set of cards in automatic mode:
ms
Pause on mouse over
Card size:
x
px
Cards spacing: horizontal
px
and vertical
px
Transition duration:
ms
Rotation mode:
Simultaneous
Sequential
Delay for sequential rotation mode:
ms
Shadow
How to use
Usage with pure JavaScript:
...
◄
Deep Blue
Sea
...
►
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
Download
Get from GitHub