Site Overlay

How to start slideshow on hover image in jquery

This is an example of slideshow. the slider will start when we hover (Mouseenter) over the image and the slider will stop when we un hover (Mouseleave)over the image.

HTML

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

CSS

<style>
.fadeInOut > div {
    position: absolute;
}
</style>

jQuery

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
	$(".fadeInOut > div:gt(0)").hide();
	$(".fadeInOut").mouseenter(function(){
		clearFadeInOut = setInterval(function(){
			$(".fadeInOut > div:first").fadeOut(1000).next().fadeIn(1000).end().appendTo(".fadeInOut");
		}, 1000);	
	});
	$(".fadeInOut").mouseleave(function(){
		clearInterval(clearFadeInOut);		
	});
});
</script>

Simple slideshow using jquery