"Carousel with Animate"
Bootstrap 3.0.0 Snippet by tech.alpha.info

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 ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- Containing frame -->
<div class="container well animated fadeIn">
<div class="row-fluid">
<!-- Carousel -->
<div id="my-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="container-fluid">
<div class="row spacer-md">
<div class="col-sm-12 col-md-5 col-md-offset-1">
<!-- Slide 1...-->
<div class="animated fadeInLeftBig slide-delay-1">
<h1 class="WhiteText content-right">Bootstrap Carousel</h1>
</div>
<h3 class="animated fadeInLeftBig slide-delay-2 YellowText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum erat non tellus tincidunt, eu venenatis ex gravida. Vestibulum lorem ligula,
hendrerit sit amet porttitor a, venenatis nec nibh. Nulla consequat quam a quam facilisis ultrices.
Sed dictum enim non ante sodales, ac tristique tortor ornare.
</h3>
</div>
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
/* Good for titles... */
body, h1, h2, h3, h4, h5, h6 {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.carousel-inner
{
background-color:blue;
}
.WhiteText
{
color:white;
}
.YellowText
{
color:gold;
}
.spacer-md
{
padding-top:50px;
padding-bottom:50px;
}
/* Make the slide sections move at different speeds */
.slide-delay-1 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: