Comment modifier Elastislide de sorte qu'il boucle à l'infini

Elastislide code a évolué et la solution ci-dessus ne fonctionne pas. J'ai donc développé ma propre solution.

Ce code permet de elastislide la lecture automatique et une fois arrivé à la dernière diapositive, il retourne à la première diapositive pour être plus ergonomique que la boucle infinie caroussel.

Ce code doit être ajouté dans le _initEvents fonction après la var self = this;

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 (infinite loop is too bad for ergonomics)
        self._slideTo(0);
        //set translation to 0
        translation = 0;
    }
}, 7000);

OriginalL'auteur roxySka

Je l'ai fait par le piratage du toggleControls fonction de (), au lieu de se cacher de la navigation pour ajouter le premier élément /préfixer le dernier élément. L'auto-correction de la quantité lorsque vous êtes au début /à la fin des articles réellement aidé à faire le tour. Malheureusement, il rompt l'animation, si l'assouplissement est utilisé.

//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();
},

OriginalL'auteur Maxim Krizhanovsky

Ajouter ce code dans le _initEvents fonction après - var instance = ce; pour faire le elastislide de lecture automatique.

window.setInterval(function(){
instance._slide('right');
}, 7000);

OriginalL'auteur Tristan

C'est pour une ancienne version de elastislide, Peut-être que ce code pourrait aider quelqu'un.

Ce n'est pas une boucle infinie, mais quand vous arrivez à la fin de la miniature carrousel et cliquez sur "suivant", il va revenir avec de l'animation à l'état initial, et si vous êtes au début et appuyez sur la touche prev il se déplacera jusqu'à la dure les images miniatures.

D'abord Vous avez un commentaire (ou supprimé) toutes les lignes de _toggleControls, de cette façon, nous évitons que les boutons de navigation obtenir invisible ils.

Puis de modifier le code de _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();
} } ) );
},

OriginalL'auteur GmM