Site Overlay

How to create slide show with two or more images together

This is an example of slideshow with two or more images fadein and fadeout or slideshow together.

The :gt() jquery selector accepts positive value only like :gt(0) this means, it will work for the rest of the element except index o.

HTML

<div class="slideshow">
<div class="fadeinout">
<span><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-1.jpg"></span>
<span><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-2.jpg"></span>
</div>
<div class="fadeinout">
<span><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-3.jpg"></span>	
<span><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-4.jpg"></span>
</div>
</div>

CSS

<style>
.fadeinout{
    position: absolute;	
}
span {
    float: left;
}
</style>

jQuery

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
	$(".slideshow > .fadeinout:gt(0)").hide();
	setInterval(function(){
		$(".slideshow > .fadeinout:first").fadeOut(3000).next().fadeIn(3000).end().appendTo(".slideshow");
	}, 3000);
});
</script>

slideshow fadein fadeout single image