<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>
<div class="col-sm-12 col-md-6">
<div class="animated fadeInRightBig text-center">
<img src="http://www.techalpha.info/apple.png" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row spacer-md">
<!-- Slide 2...-->
<div class="col-sm-12 col-md-5 col-md-offset-1">
<img class="img-responsive animated rollIn" src="http://www.techalpha.info/button.png" alt="" />
</div>
<div class="col-sm-12 col-md-6">
<div class="content-right animated rotateInDownRight slide-delay-1">
<h2 class="WhiteText">Uses the excellent animate.css</h2>
</div>
<h3 class="animated fadeInUpBig slide-delay-2 YellowText">
<i class="glyphicon glyphicon-arrow-right WhiteText"> </i> Lorem ipsum dolor sit amet
<br />
<i class="glyphicon glyphicon-arrow-right WhiteText"> </i> Lorem ipsum dolor sit amet
<br />
<i class="glyphicon glyphicon-arrow-right WhiteText"> </i> Lorem ipsum dolor sit amet
<br />
<i class="glyphicon glyphicon-arrow-right WhiteText"> </i> Lorem ipsum dolor sit amet
</h3>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="row spacer-md">
<div class="col-sm-12 col-md-5 col-md-offset-1">
<!-- Slide 3...-->
<div class="content-left animated bounceInLeft slide-delay-1">
<h2 class="WhiteText">With some css timed delays on the slides</h2>
</div>
<h3 class="animated fadeInUpBig slide-delay-2 YellowText">
<i class="glyphicon glyphicon-arrow-right WhiteText"> </i> Ut rutrum erat non tellus tincidunt
<br />
<i class="glyphicon glyphicon-arrow-right WhiteText"> </i> Ut rutrum erat non tellus tincidunt
<br />
<i class="glyphicon glyphicon-arrow-right WhiteText"> </i> Ut rutrum erat non tellus tincidunt
<br />
<i class="glyphicon glyphicon-arrow-right WhiteText"> </i> Ut rutrum erat non tellus tincidunt
</h3>
</div>
<div class="col-sm-12 col-md-6">
<img class="img-responsive animated bounceInDown" src="http://www.techalpha.info/book.png" alt="" />
</div>
</div>
</div>
</div>
</div>
<!-- button Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
/* 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 {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
}
.slide-delay-2 {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
}
/* ED MOD */
.carousel-inner > .item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 15%;
opacity: 0.5;
filter: alpha(opacity=50);
font-size: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-control.left
{
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #207cca 23%, #207cca 24%, #2989d8 32%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(23%,#207cca), color-stop(24%,#207cca), color-stop(32%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 23%,#207cca 24%,#2989d8 32%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#207cca 23%,#207cca 24%,#2989d8 32%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#207cca 23%,#207cca 24%,#2989d8 32%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#207cca 23%,#207cca 24%,#2989d8 32%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.carousel-control.right {
left: auto;
right: 0;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #207cca 23%, #207cca 24%, #2989d8 32%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(23%,#207cca), color-stop(24%,#207cca), color-stop(32%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 23%,#207cca 24%,#2989d8 32%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#207cca 23%,#207cca 24%,#2989d8 32%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#207cca 23%,#207cca 24%,#2989d8 32%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#207cca 23%,#207cca 24%,#2989d8 32%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.carousel-control:hover,
.carousel-control:focus {
outline: none;
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
left: 50%;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
right: 50%;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
font-family: serif;
}
.carousel-control .icon-prev:before {
content: '\2039';
}
.carousel-control .icon-next:before {
content: '\203a';
}
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid #ffffff;
border-radius: 10px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
margin: 0;
width: 12px;
height: 12px;
background-color: #ffffff;
}
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
text-shadow: none;
}
@media screen and (min-width: 768px) {
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
}
.carousel-caption {
left: 20%;
right: 20%;
padding-bottom: 30px;
}
.carousel-indicators {
bottom: 20px;
}
}
