CODEWITHSUNDEEP
javascriptjqueryhtmlcssslideshow
Collin K
Collin K

Reputation: 17

My slideshow only cycles through one picture

I'm trying to design a slideshow using jQuery and I've come up with the code below, however, when I run it, it only cycles through one slide and then ceases to do anything further. How can I get the pictures to cycle through?

jQuery:

$(function() {
    setInterval("rotateImages()", 3000);
});
function rotateImages() {
    var CurrentPhoto = $('#slideshow .current');
    var NextPhoto = CurrentPhoto.next();
    if (NextPhoto.length == 0) {
        NextPhoto = $('#slideshow div:first');
    }  
    CurrentPhoto.removeClass('current').addClass('previous');
    NextPhoto.css({ opacity: 0.0 }).addClass('current')
         .animate({ opacity: 1.0 }, 1000,
    function() {
         CurrentPhoto.removeClass('previous');
    }
}

HTML:

                <div id="slideshow">          
            <div class="current"><img src="image1.jpg" alt="Img" height="382" width="594"> </div>
            <div><img src="image2.jpg" alt="Img" height="382" width="594">             </div>
            <div><img src="image3.jpg" alt="Img" height="382" width="594"></div>
            <div><img src="image4.jpg" alt="Img" height="382" width="594"></div>
            <div><img src="image5.jpg" alt="Img" height="382" width="594"></div>
            </div>

...

CSS:

#slideshow div {
    z-index: 0;
    position: absolute;
    margin: 0px 0px 0px 362px;
}
#slideshow div.previous {
    z-index: 1;
}
#slideshow div.current {
    z-index: 2;
}

Upvotes: 0

Views: 73

Answers (2)

Vikas
Vikas

Reputation: 39

 function rotateImages() {
    var CurrentPhoto = $('#slideshow .current');
    var NextPhoto = CurrentPhoto.next();
    if (NextPhoto.length == 0) {
        NextPhoto = $('#slideshow div:first');
    }  
    CurrentPhoto.removeClass('current').addClass('previous');
    NextPhoto.css({ opacity: 0.0 }).addClass('current')
         .animate({ opacity: 1.0 }, 1000,
    function() {
         CurrentPhoto.removeClass('previous');
    });
};

$(function() {
    setInterval(rotateImages, 3000);
});

i have changed few things 1. function invocation in setinterval 2. moving function declaration above and then refer to that function 3. completed braces at the end of the rotateImages function

Upvotes: 0

Alvaro Montoro
Alvaro Montoro

Reputation: 29635

There are two errors in your script:

  1. There is a missing parenthesis (something that you could have easily see in the JavaScript console) to close the animate function.
  2. NextPhoto == 0 is incorrect. You want to check if the length of NextPhoto is 0 or not, but not NextPhoto itself.

Fix those 2 things, and the problems is solved:

$(function() {
    setInterval("rotateImages()", 3000);
});
function rotateImages() {
    var CurrentPhoto = $('#slideshow .current');
    var NextPhoto = CurrentPhoto.next();
    if (NextPhoto.length == 0) {
        NextPhoto = $('#slideshow div:first');
    }  
    CurrentPhoto.removeClass('current').addClass('previous');
    NextPhoto.css({ opacity: 0.0 }).addClass('current')
             .animate({ opacity: 1.0 }, 
                      1000,
                      function() {
                          CurrentPhoto.removeClass('previous');
                      });
}

See it on this JSFiddle: http://jsfiddle.net/h7afu5ex/

Upvotes: 2

Related Questions