jCarouselLite intervalle de réinitialisation autoscroll

Question

Comment réinitialiser l'intervalle de défilement automatique sur mon carrousel jCarouselLite après un événement de sorte qu'il vous permet de regarder le contenu de l'intervalle complet, quelle que soit la distance le long de la minuterie était lorsque vous avez cliqué suivant ou précédent? En ce moment, si je clique sur suivant ou précédent au bout de 9 secondes, il défile à nouveau après 1 seconde.

Dans le code source jCarouselLite sur les lignes 274- 277 est où le défilement automatique est mis en œuvre à l'aide setInterval. Je sais que vous pouvez utiliser clearInterval si vous avez l'ID retourné par setInterval, mais il n'y a pas que je peux sortir de modifier le code source, et je ne veux pas le faire.

Toutes les idées? Merci!

Answer 1

jCarouselLite lui-même ne fournit aucun moyen facile d'arrêter le défilement automatique, ce qui est un problème plus facile alors faire ce que vous semblez vouloir (j'ai compris ce droit: Vous voulez juste le défilement automatique pour arrêter temporairement le clic et puis continuer)

Hacky + façon potentiellement buggy pour arrêter le défilement automatique tout à fait

var x; //hold interval id
$(function() {
    var y = window.setInterval; //backup original setInterval function
    //overwrite with new function which stores the id for us
    window.setInterval = function() {
        x = y(arguments[0], arguments[1]);
        return x; 
    };
    //now construct carousel
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        auto: 500 
    });
    //now restore original setInterval function
    //as we only needed the custom one for the carousel to capture the hidden
    //internal call to setInterval
    window.setInterval = y;
});
$("#stopAutoScrollButton").click(function() {
    clearInterval(x);
});

---

Véritable solution

Comme nous ne pouvons pas jCarouselLite faire sur son propre comportement, nous simulons le auto de nous-même.

$(function() {
    var autoTime = 5000; //5s
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
    //simulate autoscroll by simulating "click" on next link
    var x = setInterval("$('.next').trigger('click');", autoTime);
    //if stopAuto is clicked the autoscroll is suspended for autoTime
    //no matter how far along the timer already was
    $("#stopAuto").click(function() {
        clearInterval(x);
        x = setInterval("$('.next').trigger('click');", autoTime);
    });
});

Answer 2

Voici une version avec une pause sur mouseover intégré. Fonctionne bien. http://github.com/cheald/jcarousel-lite

Answer 3

Aucune de ces réponses étaient ce que je cherchais, mais c'est ce qui arrive quand je Google « jcarousellite timer reset », donc pour la prochaine personne qui cherche à:

• la remise à zéro de la minuterie lorsque vous cliquez sur les boutons de votre diapositive précédente / suivante
• Pause le diaporama sur le vol stationnaire

Alors ce que je mets ensemble qui fonctionne pour moi:

(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),a=$("#featuredlistings a.next"),ul=$("ul",div),tLi=$("li",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v;}var li=$("li",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width(),height:li.height()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.btnPrev)$(o.btnPrev).click(function(){resetAuto(); return go(curr-o.scroll);});if(o.btnNext)$(o.btnNext).click(function(){resetAuto(); return go(curr+o.scroll);});if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i);});});if(o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll);});if(o.auto){autoScroll=setInterval(function(){go(curr+o.scroll);},o.auto+o.speed);function resetAuto(){clearInterval(autoScroll);autoScroll=setInterval(function(){go(curr+o.scroll);},o.auto+o.speed);};div.hover(function(){clearInterval(autoScroll);},function(){autoScroll=setInterval(function(){go(curr+o.scroll);},o.auto+o.speed);});}function vis(){return li.slice(curr).slice(0,v);};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll;}else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll;}else curr=to;}else{if(to<0||to>itemLength-v)return;else curr=to;}running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());running=false;});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled");}}return false;};});};function css(el,prop){return parseInt($.css(el[0],prop))||0;};function width(el){return el[0].offsetWidth+css(el,'marginLeft')+css(el,'marginRight');};function height(el){return el[0].offsetHeight+css(el,'marginTop')+css(el,'marginBottom');};})(jQuery);

Il suffit échanger avec votre script jCarouselLite actuel et l'utiliser exactement la même chose.

Answer 4

Si vous êtes en mesure / autorisé à modifier le code du plugin:

Ajouter une variable pour enregistrer l'identifiant d'intervalle les valeurs par défaut des plugins

interval: null

Rechercher:

if(o.auto)

Prenez le code qui est exécuté ici et faire une fonction interne comme:

function runAuto() {
    setInterval(function() {
        go(curr+o.scroll);
    }, o.auto+o.speed);
}

Maintenant, il suffit de sauvegarder l'intervalle à votre variable définie mais l'effacer d'abord:

function runAuto() {
    clearInterval(o.interval);
    o.interval = setInterval(function() {
        go(curr+o.scroll);
    }, o.auto+o.speed);
}

Recherchez la fonction go() dans le plug-in et ajouter un runAuto(), donc chaque fois que le déplacement de la fonction est appelée, elle remet à zéro l'intervalle.

Bien sûr, vous devez également ajouter l'appel runAuto() à if(o.auto) si l'intervalle commence au début.