jCarouselLite intervalle de réinitialisation autoscroll
-
16-09-2019 - |
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!
La solution
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);
});
});
Autres conseils
Voici une version avec une pause sur mouseover intégré. Fonctionne bien. http://github.com/cheald/jcarousel-lite
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.
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.