删除幻灯片之间的空白

Question

I am making a jQuery image slider. The slider is working perfectly fine, but I don't want the white spaces between slides. How can I get rid of them?

 window.onload = function slider() { $(".slider #1").show("fade", { direction: 'left' }, 500); $(".slider #1").delay(5000).hide("slide", { direction: 'left' }, 500); var sc = $(".slider img").size(); var count = 2; var margin = $(".slider").width(); setInterval(function() { $(".slider #" + count).show("slide", { direction: 'right' }, 500); $(".slider #" + count).delay(5000).hide("slide", { direction: 'left' }, 500); if (count == sc) { count = 1; } else { count = count + 1; } }, 6500); } 

 .img-style { position: relative; top: 0; left: 0; width: 100%; height: 100%; } .slider { height: 400px; overflow: hidden; } .slider img { display: none; } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div class="container"> <div class="row " style="width:100%;margin-left:0px;" id="main"> <div class="slider" id="slide-for"> <img id="1" class="img-style" src="http://lorempixel.com/400/200/abstract/1/" /> <img id="2" class="img-style" src="http://lorempixel.com/400/200/abstract/2/" /> <img id="3" class="img-style" src="http://lorempixel.com/400/200/abstract/3/" /> <img id="4" class="img-style" src="http://lorempixel.com/400/200/abstract/4/" /> <img id="5" class="img-style" src="http://lorempixel.com/400/200/abstract/5/" /> <img id="6" class="img-style" src="http://lorempixel.com/400/200/abstract/6/" /> </div> </div> </div> 

View on JSFiddle .

Answer 1

Absolute positioning does the trick.

 window.onload = function slider() { $(".slider #1").show("fade", { direction: 'left' }, 500); var sc = $(".slider img").size(); var count = 1; var margin = $(".slider").width(); setInterval(function() { $(".slider #" + count).toggle("slide", { direction: 'left' }, 500); if (count == sc) { count = 1; } else { count = count + 1; } $(".slider #" + count).toggle("slide", { direction: 'right' }, 500); }, 6500); } 

 .img-style { position: relative; top: 0; left: 0; width: 100%; height: 100%; } .slider { height: 400px; overflow: hidden; } .slider img { display: none; position: absolute; top: 0; left: 0; } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div class="container"> <div class="row " style="width:100%;margin-left:0px;" id="main"> <div class="slider" id="slide-for"> <img id="1" class="img-style" src="http://lorempixel.com/400/200/abstract/1/" /> <img id="2" class="img-style" src="http://lorempixel.com/400/200/abstract/2/" /> <img id="3" class="img-style" src="http://lorempixel.com/400/200/abstract/3/" /> <img id="4" class="img-style" src="http://lorempixel.com/400/200/abstract/4/" /> <img id="5" class="img-style" src="http://lorempixel.com/400/200/abstract/5/" /> <img id="6" class="img-style" src="http://lorempixel.com/400/200/abstract/6/" /> </div> </div> </div>