CODEWITHSUNDEEP
javascriptjquerycssimageslideshow
Jace Cotton
Jace Cotton

Reputation: 2014

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:

$(document).ready(function(){
    $(".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;
        }
    }, 6500);

});

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:

    <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>

JSFIDDLE: http://jsfiddle.net/6FF4y/2/

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!

Upvotes: 0

Views: 1649

Answers (1)

html5understudy
html5understudy

Reputation: 76

This is simply a case of markup. Firstly, your class names 1, 2 and 3 are not correct. A class can never begin with a number.

Secondly, wrap your images in <div>'s - wrappers are always good! Then the 3 image <div>'s should be wrapped in an inner wrap. You'll want to be sliding the inner-wrap. Your best bet is to probably use jQuery animate and loop it.

How's this fiddle? http://jsfiddle.net/6FF4y/4/

Upvotes: 3

Related Questions