How to make responsive image?

Question

I have a simple responsive image slider, which works almost fine but the problem is when the image changes from one image to another image, has a big jump, I want to solve this problem. please, see the code. and help me. thanks.

 $("#slideshow > li:gt(0)").hide(); $("#slideshow") .mouseenter(function() { if (timer) { clearInterval(timer) } }) .mouseleave(function() { timer = setInterval(function() { $("#slideshow > li:first") .fadeOut(500) .next() .fadeIn(500) .end() .appendTo("#slideshow"); }, 3000); }) .mouseleave(); 

 img { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <div> <ul id="slideshow"> <li><img src="http://lorempixel.com/800/300" alt="" /></li> <li><img src="http://placehold.it/800x300" alt="" /></li> <li><img src="http://placekitten.com/800/300" alt="" /></li> <li><img src="http://placehold.it/800x300" alt="" /></li> </ul> </div> 

Answer 1

You can position: absolute your LI elements inside a position: relative parent.

 var timer; /* PS: forgot about this??? */ $("#slideshow > li:gt(0)").hide(); $("#slideshow") .mouseenter(function() { if (timer) { clearInterval(timer) } }) .mouseleave(function() { timer = setInterval(function() { $("#slideshow > li:first") .fadeOut(500) .next() .fadeIn(500) .end() .appendTo("#slideshow"); }, 3000); }) .mouseleave(); 

 * {margin: 0;} #slideshow { position: relative; list-style: none; height: 300px; } #slideshow li { position: absolute; top: 0; left: 0; } #slideshow li img{ width:100%; height:100%; object-fit: cover; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <div> <ul id="slideshow"> <li><img src="http://lorempixel.com/800/300" alt="" /></li> <li><img src="http://placehold.it/800x300" alt="" /></li> <li><img src="http://placekitten.com/800/300" alt="" /></li> <li><img src="http://placehold.it/800x300" alt="" /></li> </ul> </div> 

---

That code above was someone's idea I've seen a lot here on SO which I totally dislike . Modifying the DOM appending elements (useless relayout/repainting)... targeting non cached elements... etc...

My suggestion is to simply use a counter and a far better approach

 /* FADE GALLERY */ (function() { var $slides = $("#slideshow").find("li"), tot = $slides.length, c = 0, itv; function anim() { $slides.stop().fadeOut().eq(++c % tot).fadeIn(); } function play() { itv = setInterval(anim, 3000); } function stop() { clearInterval(itv); } $("#slideshow").hover(stop, play).mouseout(); }()); 

 #slideshow { position: relative; list-style: none; height: 300px; margin: 0; } #slideshow li { position: absolute; top: 0; left: 0; width:100%; height: 100%; } #slideshow li + li { /* Hide using CSS to prevent flickering */ display: none; } #slideshow li img { width: 100%; height: 100%; object-fit: cover; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <div> <ul id="slideshow"> <li><img src="http://placehold.it/800x300/0bf?text=0" alt=""></li> <li><img src="http://placehold.it/800x300/f0b?text=1" alt=""></li> <li><img src="http://placehold.it/800x300/ff0?text=2" alt=""></li> <li><img src="http://placehold.it/800x300/0fb?text=3" alt=""></li> </ul> </div>