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

I did it by hacking the toggleControls() function, instead of hiding the navigation to append the first item / prepend the last item. The auto-correction of amount when you are in the beginning / end of the items actually helped to do the trick. Unfortunatelly it breaks the animation, if easing is used.

// modified version of _toggleControls
    _toggleControls     : function( dir, status ) {

        // show / hide navigation buttons
        if( dir && status ) {
            if( status === 1 )
                ( dir === 'right' ) ? this.$navNext.show() : this.$navPrev.show();
            else
                if ( dir === 'right' ) {

                    this.$slider.append( this.$slider.children('li:first').clone() ) ;
                    this.$slider.children('li:first').remove();
                } else {

                    this.$slider.prepend( this.$slider.children('li:last').clone() ) ;
                    this.$slider.children('li:last').remove();
                }
        }
        else if( this.current >= this.itemsCount - 1 || this.fitCount >= this.itemsCount )
                this.$navNext.hide();

    },