Jquery custom slider infinite loop

Question

I did jquery slider using this tutorial

http://css-plus.com/2010/09/create-your-own-jquery-image-slider/

, where the pictures are sliding automatically, but just once. How can I make them circle in an infinite loop?

on-line example :

www.vytvarkajablonec.jecool.net/ati

I'd really appreciate your help!

Answer 1

Just animate the gallary back to it's initial position if it is at the end of the gallary.

var oGallary = $('#gallery');
var gallarWidth = oGallary.width();

if(oGalary.position().left > stopPosition && oGallary.is(":animated") == false)
{
    oGallary.animate({left : "-=" + imageWidth + "px"});
}
else if ( oGalary.position().left <= stopPosition && oGallary.is(":animated") == false )
{  
    oGallary.animate({left : "+=" + gallaryWidht + "px"}) // Get full length of the entire gallary
}

Answer 2

Replace the JS code from tutorial for this:

$(document).ready(function () {

    // Gallery
    if (jQuery("#gallery").length) {

        // Declare variables
        var totalImages = jQuery("#gallery > li").length,
            imageWidth = jQuery("#gallery > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);

        jQuery("#gallery").width(totalWidth);

        jQuery("#gallery-prev").click(function () {
            if (jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")) {
                jQuery("#gallery").animate({
                    left: "+=" + imageWidth + "px"
                });
            }

            if (jQuery("#gallery").position().left === 0) {
                jQuery("#gallery > li:last").prependTo($("#gallery"));
            }

            return false;
        });

        jQuery("#gallery-next").click(function () {
            if (jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")) {
                jQuery("#gallery").animate({
                    left: "-=" + imageWidth + "px"
                });
            }

            if (jQuery("#gallery").position().left === stopPosition) {
                jQuery("#gallery > li:first").appendTo($("#gallery"));
            }

            return false;
        });
    }

});