LIVE DEMO
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Default Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--Bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<header class="row">
<h1>Bootstrap 3.3.6 Carousel Default Settings</h1>
</header>
</div>
<!--begin Bootstrap Carousel-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for items and captions -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1200/400/sports/4/" alt="...">
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Details....</p></div>
</div>
<div class="item">
<img src="http://lorempixel.com/1200/400/sports/3/" alt="...">
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Details....</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1200/400/sports/2/" alt="...">
<div class="carousel-caption">
<h3>Image 3</h3>
<p>Details....</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1200/400/sports/1/" alt="...">
<div class="carousel-caption">
<h3>Image 4</h3>
<p>Details....</p>
</div>
</div>
<!--end active-->
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
<!--end carousel-->
</div>
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!--Bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
For a recent project, I needed a FADE transition and I wanted image captions and text to NOT be centered over my slides.
My custom CSS code:
<style>
@charset "utf-8";
/**Bootstrap Carousel FADE**/
.carousel img {width:100%}
.carousel-caption {
background-color: rgba(0,0,0,0.5);
position: absolute;
right: 0;
bottom: 0px;
left: 0;
z-index: 10;
padding-top: 0;
padding-bottom: 0px;
color: #fff;
text-align: left;
padding-left: 2%;
}
.carousel-caption h3 {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
letter-spacing: -1px;
font-size: 24px;
font-weight: bold;
margin-bottom: 0;
margin-top: 6px !important;
text-align: left;
text-shadow: 2px 1px 2px rgba(0,0,0,0.9);
}
.carousel-caption p {
margin-top: 0;
font-size: 14px;
text-align: left;
}
.carousel-control { width: /*15%*/ 8% }
.carousel-indicators { bottom: 2px }
.carousel-indicators .active { background: #FDF7DE }
/**arrows**/
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
width: 25px;
height: 25px;
font-size: 25px;
}
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
/*WHAT'S NEW IN BS 3.3: Added transforms to improve carousel performance in modern browsers.
now override the 3.3 new styles for modern browsers & apply opacity*/
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
</style>
And finally, I added the carousel-fade class and a data-interval to myCarousel HTML code. Incidentally, if you set the data-interval value to "0", the slides do not rotate automatically. If you want a faster slide rotation, use a lower value. For slower rotation, use a higher value.
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="7000">
FINAL LIVE DEMO
