JCARousellite Restablecer intervalo de AutoScroll

Question

¿Cómo puedo restablecer el intervalo de desplazamiento automático en mi JCarousellite Carrusel después de algún evento para que le permita ver el contenido durante el intervalo completo, independientemente de qué tan lejos estuviera el temporizador cuando hizo clic a continuación o antes. En este momento, si hago clic en Siguiente o anterior después de 9 segundos, se desplaza nuevamente después de 1 segundo.

En el Código fuente de JCarousellite en las líneas 274-277 es donde se implementa el auto-desplazamiento utilizando setInterval. Sé que puedes usar clearInterval Si tiene la identificación devuelta por SetInterval, pero no hay una que pueda salir de modificar el código fuente, y no quiero hacerlo.

¿Algunas ideas? ¡Gracias!

Answer 1

JCarousellite en sí no proporciona ninguna manera fácil de detener el desplazamiento automático, lo cual es un problema más fácil y luego haz lo que parece querer (? ¿Entendí esto bien? Solo quieres que la AutoScroll se detenga temporalmente en el clic y luego continúe)

Hacky + forma potencialmente buggy de detener el AutoScroll por completo

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);
});

---

Solución real

Como no podemos hacer que JCarousellite haga esto por su cuenta, simulamos el auto comportamiento nosotros mismos.

$(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

Aquí hay una versión con una pausa en Mouseover incorporado. Funciona bien.http://github.com/cheald/jcarousel-lite

Answer 3

Ninguna de estas respuestas fue lo que estaba buscando, pero esto es lo que surge cuando google 'JCarousellite Resteby Timer', así que para la próxima persona que busca:

• Haga que el restablecimiento del temporizador cuando haga clic en sus botones de deslizamiento anterior/siguiente
• Pausa la presentación de diapositivas en el flotador

Entonces esto es lo que armé que funciona para mí:

(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);

Simplemente cámbielo con su script JCarousellite actual y úselo de la misma manera.

Answer 4

If you are able/authorized to change the plugin code:

Add a variable to save the interval id to the plugins defaults

interval: null

Search for:

if(o.auto)

Take the code which is executed here and make an internal function with it like:

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

Now just save the interval to your defined variable but clear it first:

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

Search for the go() function in the plugin and add a runAuto(), so each time the function go is called it resets the interval.

Of course you must also add the runAuto() call to if(o.auto) so the interval starts at first.