mardi 5 mai 2015

Stop slideshow from cycling if only has one image + stop fade of first image when slideshow loads

I have a slideshow that is almost perfect in fitting my needs. I just need to change a couple of things:

  1. The slideshow should not fade in and out if there is only one image.
  2. The slideshow should not fade in when the page is loaded.

Thanks!

I have the code here:

$(window).load(function() { //start after HTML, images have loaded

var InfiniteRotator = {
    init: function() {
        //initial fade-in time (in milliseconds)
        var initialFadeIn = 1000;

        //interval between items (in milliseconds)
        var itemInterval = 5000;

        //cross-fade time (in milliseconds)
        var fadeTime = 2500;

        //count number of items
        var numberOfItems = $('.rotating-item').length;

        //set current item
        var currentItem = 0;

        //show first item
        $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

        //loop through the items        
        var infiniteLoop = setInterval(function() {
            $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            if (currentItem == numberOfItems - 1) {
                currentItem = 0;
            } else {
                currentItem++;
            }
            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

        }, itemInterval);
    }
};

InfiniteRotator.init();

});

Html code:

<div id="rotating-item-wrapper">
<img src="images/slider/1.jpg" class="rotating-item" />
<img src="images/slider/2.jpg" class="rotating-item" />
<img src="images/slider/3.jpg" class="rotating-item" />
</div>

Aucun commentaire:

Enregistrer un commentaire