A simple Javascript content slider

simple.content.slider.js

/**
 * @name        jQuery Simple Content Slider
 * @author      Christopher Varakliotis
 * @version     0.2
 * @url         -
 * @license     MIT License
 */

(function($, undefined){


    $.fn.contentSlider = function(options) {

        // override defaults with specified options
        var _options = $.extend( {}, $.fn.contentSlider.defaults, options );

        return this.each(function(){

            // cache container element
            var elem = $(this);

            // continue to next element if already initialized
            if(elem.hasClass('initialized-slider') && !_options.forceInit)
                return true;

            // mark slider element as initialized
            elem.addClass('initialized-slider');

            // cache needed elements
            var viewport = $('.viewport', elem),
                next = $('.next', elem),
                prev = $('.prev', elem),
                content_wrap = $('.content-wrap', viewport),
                slider_contents = $('.slider-content', content_wrap),
                size = slider_contents.size(),
                position = 0,  // ranges from 0..-(size-1)
                animating = false;


            // slides contents towards specified direction
            var slide = function(direction) {

                if( !animating ) {

                    // mark content wrap as animating to avoid multiple stacking animations
                    animating = true;

                    // specify sliding distance
                    var x = slider_contents.outerWidth();

                    // slide the list to the specified direction
                    if(direction == 'right') {
                        position = position > (1-size) ? position - 1 : 0 ;
                    }
                    else {
                        position = position < 0 ? position + 1 : 1 - size;
                    }
                    content_wrap.animate({'left': position * x + 'px'}, _options.animateDuration, function() {
                        animating = false;
                    });
                }
            };

            // responds to slider width changes maintaining slideshow position
            var adjustSliderSize = function(w) {

                // resize slider inner elements to fit slider main container
                content_wrap.width(size * w);
                slider_contents.width(w);

                // re-position content-wrap aligning it with viewport
                content_wrap.css('left', position * w + 'px');
            };

            // set slider content width
            slider_contents.css({
                width: viewport.outerWidth() + 'px',
                height: viewport.outerHeight() + 'px'
            });

            content_wrap.css({
                width: (viewport.outerWidth() * size) + 'px',
                height: viewport.outerHeight() + 'px'
            });

            // install handlers for sliding content
            next.click(function(event) {
                slide('right');
            });
            prev.click(function(event) {
                slide('left');
            });

            // Set timer if autoSlide is on
            if( _options.autoSlide ) {
                elem.timer = setInterval(function() {
                    slide("right");
                }, _options.autoSlideInterval);

                // Pause auto slide if pauseOnHover is on
                if( _options.pauseOnHover ) {
                    elem.hover(function() {
                        clearInterval(elem.timer);
                    }, function(){
                        elem.timer = setInterval(function() {
                            slide("right");
                        }, _options.autoSlideInterval);
                    });
                }
            }

            // set/adjust slider dimensions on 'gridWidthChanged'event (fired from artist.page.functions.js)
            $(window).on('resize', function() {
                adjustSliderSize(elem.outerWidth());
            });

        });
    };

    $.fn.contentSlider.defaults = {
        animateDuration     : 200,
        autoSlide           : false,
        autoSlideInterval   : 4000,
        pauseOnHover        : false,
        forceInit           : false
    };
})(jQuery);