How to modify Elastislide so it loops infinitely

Question

I\'ve been searching for an image carousel that will display several images at once, is responsive and loops infinitely.

Elastislide seems to be the most suitable ( http

Answer 1

This is for an old version of elastislide, Maybe this code could help someone.

This is not an infinite loop, but when you get to the end of the thumbnail carousel and click on next it goes back with animation to the initial state, and if you're at the beginning and press the prev button it will move till the lasts thumbnail images.

First You have to comment (or removed) all the lines of _toggleControls, in this way we avoid that the buttons in navigation get hiden.

And then change the code of _slide:

        _slide              : function( dir, val, anim, callback ) {

        var ml      = parseFloat( this.$slider.css('margin-left') );

        // val is just passed when we want an exact value for the margin left (used in the _slideToCurrent function)
        if( val === undefined ) {

            // how much to slide?
            var amount  = this.fitCount * this.itemW, val;

            if( amount < 0 ) return false;
            // make sure not to leave a space between the last item / first item and the end / beggining of the slider available width
            if( dir === 'right' && this.sliderW - ( Math.abs( ml ) + amount ) < this.visibleWidth ) {                   
                amount  = this.sliderW - ( Math.abs( ml ) + this.visibleWidth ) - this.options.margin; // decrease the margin left
                //Loop to the beginning
                if (amount === 0) {
                    this.current = 0;                       
                    amount = this.sliderW - this.visibleWidth;
                    anim = undefined;
                    dir = 'left';
                }
            }
            else if( dir === 'left' && Math.abs( ml ) - amount < 0 ) {
                amount  = Math.abs( ml );
                //Loop to the end
                if ($(".es-carousel ul").css("margin-left") === "0px") {
                    this.current = this.itemsCount - 1;
                    amount = -(this.sliderW - this.visibleWidth);                       
                    anim = undefined;
                }
            }
            else {
                var fml; // future margin left
                ( dir === 'right' ) 
                    ? fml = Math.abs( ml ) + this.options.margin + Math.abs( amount )
                    : fml = Math.abs( ml ) - this.options.margin - Math.abs( amount );                      
            }

            ( dir === 'right' ) ? val = '-=' + amount : val = '+=' + amount;                
        }
        else {
            var fml     = Math.abs( val ); // future margin left

            if( Math.max( this.sliderW, this.visibleWidth ) - fml < this.visibleWidth ) {
                val = - ( Math.max( this.sliderW, this.visibleWidth ) - this.visibleWidth);
                if( val !== 0 )                     
                    val += this.options.margin; // decrease the margin left if not on the first position                        
                fml = Math.abs( val );
            }
        }

        $.fn.applyStyle = ( anim === undefined ) ? $.fn.animate : $.fn.css;

        var sliderCSS   = { marginLeft : val };

        var instance    = this;

        this.$slider.stop().applyStyle( sliderCSS, $.extend( true, [], { duration : this.options.speed, easing : this.options.easing, complete : function() {
            if( callback ) callback.call();
        } } ) );

    },