StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here is a modified answer from a similar question: <a href="https://stackoverflow.com/questions/10859998/how-to-modify-elastislide-so-it-loops-infinitely">How to modify Elastislide so it loops infinitely</a></p> <p>This will make Elastislide autoplay and when on the last slide it will return to the first slide.</p> <p><strong>Add this code to the <code>$.Elastislide.defaults</code> object after <code>start : 0,</code>:</strong></p> <pre><code>// autoplay true || false autoplay : true, </code></pre> <p>You'll then have the ability to set the <code>autoplay</code> value (true or false) when you set the options up, as you were trying to do in your example code above.</p> <p><strong>This code should be added in the <code>_initEvents</code> function after var <code>self = this;</code></strong></p> <pre><code> if(this.options.autoplay == true){ var translation = 0; // width/height of an item ( <li> ) var itemSpace = this.options.orientation === 'horizontal' ? this.$items.outerWidth( true ) : this.$items.outerHeight( true ); // total width/height of the <ul> 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); } </code></pre> <hr> <p>Be aware that as Elastislide evolves past v1.1.0 this code may not work in future versions.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload