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

Slightly modified version of RoxySka's answer, adding the ability to turn it on and off with the initialization settings.

This will make Elastislide autoplay and when on the last slide it will return to the first slide.

Add this code to the $.Elastislide.defaults object after start : 0,:

// autoplay true || false
autoplay : true,

You'll then have the ability to set the autoplay value (true or false) when you set the options up, as you were trying to do in your example code above.

This code should be added in the _initEvents function after var self = this;

     if(this.options.autoplay == true){
            var translation = 0;
            // width/height of an item ( 
 )
            var itemSpace = this.options.orientation === 'horizontal' ? this.$items.outerWidth( true ) : this.$items.outerHeight( true );
            // total width/height of the 

            var totalSpace = this.itemsCount * itemSpace;
            // visible width/height
            var visibleSpace = this.options.orientation === 'horizontal' ? this.$carousel.width() : this.$carousel.height();
            //slide auto
            window.setInterval(function(){
                //test if we should go to next slide or return to first slide
                if(totalSpace > translation + visibleSpace)
                {
                    //go to next slide
                    self._slide('next');
                    //update translation
                    translation += visibleSpace;
                }
                else
                {
                    //return to first slide
                    self._slideTo(0);
                    //set translation to 0
                    translation = 0;
                }
            }, 7000);
        }

---

Be aware that as Elastislide evolves past v1.1.0 this code may not work in future versions.