I am attempting to create a bootstrap slider that fades in and out when transitioning between slides, similar to the effect demonstrated in this template.. I am using Visual Studio 2010 with ASP.NET. The issue I'm facing is that when the image changes, there is a brief moment where a gray background appears before the next image is displayed. I can't seem to figure out what's causing this... My code snippet below uses Bootstrap 3.3.7:
<style type="text/css>
.carousel-fade .carousel-inner .item {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
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;
}
</style>
</head>
<body>
<div id="Carousel" class="carousel slide carousel-fade">
<ol class="carousel-indicators">
<li data-target="Carousel" data-slide-to="0" class="active"></li>
<li data-target="Carousel" data-slide-to="1"></li>
<li data-target="Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="../Images/ImageE_Beta.jpg" class="img-responsive"/>
</div>
<div class="item">
<img src="../Images/ImageE_Beta.jpg" class="img-responsive"/>
</div>
<div class="item">
<img src="../Images/ImageE_Beta.jpg" class="img-responsive"/>
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
Any suggestions or solutions?
Update
I tried changing
<div id="Carousel" class="carousel slide carousel-fade"><div id="Carousel" style="background-color:red" class="carousel slide carousel-fade">