"Bootstrap Swap Card Carousel"
Bootstrap 3.2.0 Snippet by pradeep330

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="wrapper">
<div class="carousel carousel-card slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="card yellow">
<div>
<p>Card 1</p>
</div>
</div>
</div>
<div class="item">
<div class="card green">
<div>
<p>Card 2</p>
</div>
</div>
</div>
<div class="item">
<div class="card red">
<div>
<p>Card 3</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrapper{padding:40px; position:relative;}
.card { width: 160px; top: 0; min-height: 65px; border-radius: 15px; z-index: 1; }
.red { background: #d42428; }
.yellow { background: #ffcb2c; }
.green { background: #24ea86; }
.card > div { padding: 50px; }
.card > div p { color: #fff; font-size: .8em; margin-bottom: 0;text-align:center; }
.carousel-card .carousel-inner { position: relative; overflow: visible; width: 100%; }
.carousel-card .carousel-inner .item:first-child { left: 0; }
.carousel-card .carousel-inner .item:nth-child(2) { left: 5px; }
.carousel-card .carousel-inner .item:nth-child(3) { left: 10px; }
.carousel-card .carousel-inner .item { transition-duration: 2s; display: block; position: absolute; width: 100%; }
.carousel-card .carousel-inner .item.active { transition-duration: 2s; z-index: 9; -webkit-animation: swap 1s ease; -moz-animation: swap 1s ease; animation: swap 1s ease; }
@-webkit-keyframes swap {
0% { left: 0; z-index: 0; -o-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); }
49% { left: 100px; z-index: 0; -o-transform: rotate(10deg) scale(.8); transform: rotate(10deg) scale(.8); }
50% { left: 100px; z-index: 9; -o-transform: rotate(10deg) scale(.8); transform: rotate(10deg) scale(.8); }
100% { left: 0; z-index: 9; -o-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(); }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard 2 PRO
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: