"slim carrousel"
Bootstrap 3.0.0 Snippet by evarevirus

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<nav class="black-gradient">
<div id="left-arrow" class="black-gradient">
<span></span>
</div>
<!--left-arrow-->
<div id="carousel">
<section class="container">
<div id="card">
<figure class="front bravo"></figure>
<figure class="top bravo"></figure>
</div>
<div id="card-info">
<h1>Johnny Bravo</h1>
</div>
</section>
<!--end of section-->
<section class="container">
<div id="card" class="flipped">
<figure class="front dexter"></figure>
<figure class="top dexter"></figure>
</div>
<div id="card-info">
<h1>Dexter</h1>
</div>
</section>
<!--end of section-->
<!--end of section-->
<section class="container">
<div id="card" class="flipped">
<figure class="front edd"></figure>
<figure class="top edd"></figure></div><div id="card-info">
<h1>Ed, Edd & Eddy</h1>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
body {background-color:#74AFDA;}
* {box-sizing:border-box}
nav {width:600px;height:70px;border:solid 3px black;margin: 100px auto;position:relative;overflow:hidden;padding:0px;}
nav div#carousel {position:relative;width:200%;left:0;}
nav #left-arrow {width:50px;height:70px;position:absolute;left:0;background-color:#000;z-index:999;}
nav #right-arrow {width:50px;height:70px;position:absolute;right:0;background-color:#000;z-index:999;}
.container {
height: 70px;
min-width:70px;
position: relative;
float:left;
-webkit-perspective: 1000;
background-color:#000;
}
#card {
width: 70px;
height: 70px;
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform .2s;
}
.container:last-child {
border-right:solid px black;
}
#card-info {float:left;width:0px;height:35px;overflow:hidden;-webkit-transition:all .5s;
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(32,124,202,1) 47%, rgba(125,185,232,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(47%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1)));
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(32,124,202,1) 47%,rgba(125,185,232,1) 100%);
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(32,124,202,1) 47%,rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(32,124,202,1) 47%,rgba(125,185,232,1) 100%);}
#card figure {
display: block;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit

Questions / Comments: