Carousel Fade

Bootstrap v2.3.2

by Glynne Turner

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="carousel-fade" class="carousel fade">
	<div class="carousel-inner">
		<div class="item active">
			<img src="https://thanet-web-design.com/PIZZA/wp-content/uploads/2020/12/PIZZARIACAPRI202029-1.jpg" alt="" width="100%">
			<div class="carousel-caption">
				<h4>Fade thumbnail 1</h4>
			</div>
		</div>
		<div class="item">
			<img src="https://thanet-web-design.com/PIZZA/wp-content/uploads/2020/12/PIZZARIACAPRI202022-1.jpg" alt="" width="100%">
			<div class="carousel-caption">
				<h4>Fade thumbnail 2</h4>
			</div>
		</div>
		<div class="item">
			<img src="https://thanet-web-design.com/PIZZA/wp-content/uploads/2020/12/PIZZARIACAPRI20203-1.jpg" alt="" width="100%">
			<div class="carousel-caption">
				<h4>Fade thumbnail 3</h4>
			</div>
		</div>
	</div> 
</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
}