For one of my websites, I am using a theme that originally came with a single background image. I modified it to have multiple background images for the 'section' tag
<section id="intro" class="intro"></section>Unfortunately, the script doesn't work properly as it shows a black screen in between images sometimes.
You can see an example on CodePen here
<!-- Section: intro -->
<section id="intro" class="intro">
<div class="slogan">
<h1><span class="text_color">WELCOME TO SQUAD</span> </h1>
</div>
<div class="page-scroll">
<div class="wow shake" data-wow-delay="0.4s">
<a href="#latest-tabs" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</section>
<!-- /Section: intro -->
To avoid the black screen issue, I'm displaying all these images in another hidden div using the trick of setting its display property. This ensures that all images are cached, preventing delays in loading each image individually.
<div class="background-images" style="display: none !important;">
<img src="http://bootstraptaste.com/theme/squadfree/img/bg1.jpg" />
<img src="http://feelgrafix.com/data_images/out/12/859698-nature-background.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140402202316338_photo.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140344524813450_photo.jpg" />
<img src="http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg" />
</div>
It seems to be working well in browsers other than Firefox. I'm looking to fix this or find another script that can create a slideshow effect for a container div, similar to the example shown, and smoothly transitions with fade-in and fade-out effects.