Question

I wrote a slideshow plugin, but for some reason maybe because I’ve been working on it all day, I can’t figure out exactly how to get it to go back to state one, once it’s reached the very last state when it’s on auto mode.

I’m thinking it’s an architectual issue at this point, because basically I’m attaching the amount to scroll left to (negatively) for each panel (a panel contains 4 images which is what is currently shown to the user). The first tab should get: 0, the second 680, the third, 1360, etc. This is just done by calculating the width of the 4 images plus the padding.

I have it on a setTimeout(function(){}) currently to automatically move it which works pretty well (unless you also click tabs, but that’s another issue). I just want to make it so when it’s at the last state (numTabs – 1), to animate and move its state back to the first one.

Code:

(function($) {
var methods = {
init: function(options) {
var settings = $.extend({
‘speed’: ‘1000’,
‘interval’: ‘1000’,
‘auto’: ‘on’
}, options);

        return this.each(function() {
            var $wrapper = $(this);
            var $sliderContainer = $wrapper.find('.js-slider-container');
            $sliderContainer.hide().fadeIn();

            var $tabs = $wrapper.find('.js-slider-tabs li a');
            var numTabs = $tabs.size();
            var innerWidth = $wrapper.find('.js-slider-container').width();

            var $elements = $wrapper.find('.js-slider-container a');
            var $firstElement = $elements.first();
            var containerHeight = $firstElement.height();
            $sliderContainer.height(containerHeight);

            // Loop through each list element in `.js-slider-tabs` and add the
            // distance to move for each "panel". A panel in this example is 4 images
            $tabs.each(function(i) {
                // Set amount to scroll for each tab
                if (i === 1) {
                    $(this).attr('data-to-move', innerWidth + 20); // 20 is the padding between elements
                } else {
                    $(this).attr('data-to-move', innerWidth * (i) + (i * 20));
                }

            });

            // If they hovered on the panel, add paused to the data attribute
            $('.js-slider-container').hover(function() {
                $sliderContainer.attr('data-paused', true);
            }, function() {
                $sliderContainer.attr('data-paused', false);
            });

            // Start the auto slide
            if (settings.auto === 'on') {
                methods.auto($tabs, settings, $sliderContainer);
            }

            $tabs.click(function() {
                var $tab = $(this);
                var $panelNum = $(this).attr('data-slider-panel');
                var $amountToMove = $(this).attr('data-to-move');

                // Remove the active class of the `li` if it contains it
                $tabs.each(function() {
                    var $tab = $(this);
                    if ($tab.parent().hasClass('active')) {
                        $tab.parent().removeClass('active');
                    }
                });

                // Add active state to current tab
                $tab.parent().addClass('active');

                // Animate to panel position
                methods.animate($amountToMove, settings);
                return false;
            });
        });
    },

    auto: function($tabs, settings, $sliderContainer) {
        $tabs.each(function(i) {
            var $amountToMove = $(this).attr('data-to-move');

            setTimeout(function() {
                methods.animate($amountToMove, settings, i, $sliderContainer);
            }, i * settings.interval);
        });
    },

    animate: function($amountToMove, settings, i, $sliderContainer) {
            // Animate
            $('.js-slider-tabs li').eq(i - 1).removeClass('active');
            $('.js-slider-tabs li').eq(i).addClass('active');

            $('#js-to-move').animate({
                'left': -$amountToMove
            }, settings.speed, 'linear', function() {});
    }
};

$.fn.slider = function(method) {
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        return false;
    }
};
})(jQuery);

$(window).ready(function() {
    $('.js-slider').slider({
        'speed': '10000',
        'interval': '10000',
        'auto': 'on'
    });
});​

The auto and animate methods are where the magic happens. The parameters speed is how fast it’s animated and interval is how often, currently set at 10 seconds.

Can anyone help me figure out how to get this to “infinitely loop”, if you will?

Here is a JSFiddle

Answer 1

It would probably be better to let go of the .each() and setTimeout() combo and use just setInterval() instead. Using .each() naturally limits your loop to the length of your collection, so it’s better to use a looping mechanism that’s not, and that you can break at any point you choose.

Besides, you can readily identify the current visible element by just checking for .active, from what I can see.

You’d probably need something like this:

setInterval(function () {
    // do this check here.
    // it saves you a function call and having to pass in $sliderContainer
    if ($sliderContainer.attr('data-paused') === 'true') { return; }

    // you really need to just pass in the settings object.
    // the current element you can identify (as mentioned),
    // and $amountToMove is derivable from that.
    methods.animate(settings);
}, i * settings.interval);

// ...

// cache your slider tabs outside of the function
// and just form a closure on that to speed up your manips
var slidertabs = $('.js-slider-tabs');
animate : function (settings) {

    // identify the current tab
    var current = slidertabs.find('li.active'),

    // and then do some magic to determine the next element in the loop
        next = current.next().length >= 0 ? 
                   current.next() : 
                   slidertabs.find('li:eq(0)')
        ;

    current.removeClass('active');
    next.addClass('active');

    // do your stuff

};

The code is not optimized, but I hope you see where I’m getting at here.