Bootstrap Snippet Bootstrap Carousel with Animate css using HTML CSS

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/animate.min.css" rel="stylesheet" />
<div class="container main-container">
  
  <h1>Bootstrap Carousel with Animate css</h1>
    <div id="carousel-example-generic" class="carousel slide">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <!-- First slide -->
        <div class="item active deepskyblue">
          <div class="carousel-caption">
            <h3 data-animation="animated bounceInLeft">
              This is the caption for slide 1
            </h3>
            <h3 data-animation="animated bounceInRight">
              This is the caption for slide 1
            </h3>
            <button class="btn btn-primary btn-lg" data-animation="animated slideInLeft">Button</button>
          </div>
        </div> <!-- /.item -->
        <!-- Second slide -->
        <div class="item skyblue">
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
.main-container {
  padding: 10px 15px;
}
.skyblue {
    background-color: #FF5722;
}
.deepskyblue {
    background-color: #E91E63;
}
.darkerskyblue {
    background-color: #FF9800;
}
.carousel-indicators {
    bottom: 0;
}
.carousel-control.right,
.carousel-control.left {
    background-image: none;
}
.carousel .item {
    min-height: 350px; 
    height: 100%;
    width:100%; 
}
.carousel-caption h3,
.carousel .icon-container,
.carousel-caption button {
    font-size: 2em;
    font-family: sans-serif;
    font-weight: bold;
}
.carousel-caption h3 {
    padding: .5em;
}
.carousel .icon-container {
    display: inline-block;
    font-size: 25px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Carousel with Animate css"
Bootstrap 3.3.0 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Bootstrap Carousel with Animate css" Bootstrap 3.3.0 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Bootstrap Carousel with Animate css"
Bootstrap 3.3.0 Snippet by ALIMUL AL RAZY