jQuery slideshow image delay
I have a slideshow which rotates three images from right to left.
Everything works fine, except the images slide in after the previous image
has already slid all the way out (leaving a white space between images). I
have tried different timings with the setInterval and hide and show
functions but with no avail.
JavaScript:
function Slider() {
$(".slider .1").show("fade", 500);
$(".slider .1").delay(5500).hide("slide", {direction:"left"}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function() {
$(".slider ."+count).show("slide", {direction:"right"}, 500);
$(".slider ."+count).delay(5500).hide("slide", {direction:'left'},
500);
if(count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6000);
}
CSS:
.slider {
width: 200px;
height: 200px;
overflow: hidden;
margin: 30px auto;
background-image:
url('http://www.thatssotrue.com/images/ajax_loader.gif');
background-size: 50px 50px;
background-position: center center;
background-repeat: no-repeat;
}
.slider img {
width: 200px;
height: 200px;
display: none;
}
HTML:
<body onload="Slider();">
<div class="slider">
<img class="1"
src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"
height="200" width="200">
<img class="2"
src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"
height="200" width="200">
<img class="3"
src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"
height="200" width="200">
</div>
</body>
Any ideas on how I could make the images hug each other (no space in
between) as they slide in/out?
Note: I don't own any of the images, nor do I associate myself with the
websites they are hosted at. I just used these as an example since the
images I'm actually using are merely in a directory, not a url.
Any help would be much appreciated!
No comments:
Post a Comment