bootstrap slider with fade effect

bootstrap slider with fade effect

by rajnishw3

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id="carousel-fade" class="carousel fade">
	<ol class="carousel-indicators">
		<li data-target="#carousel-fade" data-slide-to="0" class="active"></li>
		<li data-target="#carousel-fade" data-slide-to="1"></li>
		<li data-target="#carousel-fade" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner">
		<div class="item active">
			<img src="http://placehold.it/600x250/abb/000" alt="" width="100%">
			<div class="carousel-caption">
				<h4>thumbnail 1</h4>
			</div>
		</div>
		<div class="item">
			<img src="http://placehold.it/600x250/bab/000" alt="" width="100%">
			<div class="carousel-caption">
				<h4>thumbnail 2</h4>
			</div>
		</div>
		<div class="item">
			<img src="http://placehold.it/600x250/bba/000" alt="" width="100%">
			<div class="carousel-caption">
				<h4>thumbnail 3</h4>
			</div>
		</div>
	</div>
	<a class="left carousel-control" href="#carousel-fade" data-slide="prev">&lsaquo;</a>
	<a class="right carousel-control" href="#carousel-fade" data-slide="next">&rsaquo;</a>
</div>

CSS

.carousel.fade{
	opacity:1
}
.carousel.fade>.carousel-inner>.item{
	-moz-transition:opacity ease-in-out .6s;
	-o-transition:opacity ease-in-out .6s;
	-webkit-transition:opacity ease-in-out .6s;
	transition:opacity ease-in-out .6s;
	left:0 !important;
	opacity:0;
	top:0;
	position:absolute;
	width:100%;
	display:block !important;
	z-index:1;
}
.carousel.fade>.carousel-inner>.item:first-child{
	top:auto;
	position:relative;
}
.carousel.fade>.carousel-inner>.active{
	opacity:1;
	-moz-transition:opacity ease-in-out .6s;
	-o-transition:opacity ease-in-out .6s;
	-webkit-transition:opacity ease-in-out .6s;
	transition:opacity ease-in-out .6s;
	z-index:2
}
.carousel.fade>.carousel-control{
	z-index:2
}