After researching on various platforms, including Stack Overflow, I came across a similar question that I am facing now. Unfortunately, none of the solutions provided have worked for me so far. I apologize if this is repetitive, but I can't seem to figure out why it's not working!
The problem lies in implementing a fullscreen bootstrap carousel with background-image slides set to background-size: cover on my Wordpress homepage. The transition between images needs to be smooth, yet the first two slides are fading to white (black in Firefox).
If anyone has a solution to ensure a seamless transition, your help would be greatly appreciated.
Thanks in advance.
Below is the HTML code snippet:
<div id="myCarousel" class="carousel container slide carousel-fade">
<div class="carousel-inner">
<div class="active item one">
<div class="carousel-caption">
<h2><a href="http://www.topographicwebdesign.co.uk/work- form/category/work/#astral">Astral Pattern</a></h2>
</div>
</div>
<div class="item two">
<div class="carousel-caption">
<h2><a href="http://www.topographicwebdesign.co.uk/work-form/category/work/#shark">Imaginary Music - La Shark</a></h2>
</div>
</div>
<div class="item three">
<div class="carousel-caption">
<h2><a href="http://www.topographicwebdesign.co.uk/work-form/category/work/#troubled">Troubled Waters</a></h2>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a><a class="carousel-control right" href="#myCarousel" data-slide="next"> </a>
</div>Here is the custom CSS used:
.carousel .item {
position: fixed;
width: 100%;
height: 100%;
}
.carousel .one {
background: url('http://www.topographicwebdesign.co.uk/work-form/wp- content/uploads/2016/01/Bunhill-Walking-Map_small.jpg') no-repeat center center;
background-size: cover;
-moz-background-size: cover;
}
.carousel .two {
background: url('http://www.topographicwebdesign.co.uk/work-form/wp- content/uploads/2016/01/Imaginary-Music_small.jpg') no-repeat center center;
background-size: cover;
-moz-background-size: cover;
}
.carousel .three {
background: url('http://www.topographicwebdesign.co.uk/work-form/wp-content/uploads/2016/01/Sir-Johns-Nose_small.jpg') no-repeat center center;
background-size: cover;
-moz-background-size: cover;
}
.carousel .active.left {
left:0;
opacity:0;
z-index:2;
}
.carousel-control.left,.carousel-control.right{
width:10px;
height:10px;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
background-color:white;
position:fixed;
background-image:none;
}
.carousel-caption{
position:absolute;
bottom:10px;
left:0;
right:0;
text-shadow:none;
}And here is the corresponding JavaScript code:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.carousel').carousel({interval: 5000});
});
</script>