Cómo hacer una pausa en vuelo estacionario con fácil control deslizante

Question

http: // cssglobe. com / post / 4004 / easy-slider-15-del-fácil-jquery-plugin-para-deslizante

Estoy utilizando fácil control deslizante para la bandera y me llamaron por debajo de la escritura a juego

    $("#slider").easySlider({
            auto: true,
            continuous: true,
            nextId: "slider1next",
            prevId: "slider1prev",
            hoverpause: true            });
    });

Se deslizante correctamente. Pero quiero hacer una pausa de deslizamiento, mientras que la libración en la diapositiva

Answer 1

You have to alter existing easySlider1.5.js to suit your requirement. As shown in your code you can add new parameter hoverpause: true

In easySlider1.5.js you have to add

            hoverpause: false

in options,

also at the end you need to add

   if(options.hoverpause && options.auto){
            $(this).mouseover(function(){
                clearTimeout(timeout);                  
            }).mouseout(function(){
                animate("next",false);                  
            })
}

Here is entire js

(function($) {

    $.fn.easySlider = function(options){

        // default configuration properties
        var defaults = {            
            prevId:         'prevBtn',
            prevText:       'Previous',
            nextId:         'nextBtn',  
            nextText:       'Next',
            controlsShow:   true,
            controlsBefore: '',
            controlsAfter:  '', 
            controlsFade:   true,
            firstId:        'firstBtn',
            firstText:      'First',
            firstShow:      false,
            lastId:         'lastBtn',  
            lastText:       'Last',
            lastShow:       false,              
            vertical:       false,
            speed:          800,
            auto:           false,
            pause:          4000,
            continuous:     false,
            hoverpause:     false
        }; 

        var options = $.extend(defaults, options);  

        this.each(function() {  
            var obj = $(this);              
            var s = $("li", obj).length;
            var w = $("li", obj).width(); 
            var h = $("li", obj).height(); 
            obj.width(w); 
            obj.height(h); 
            obj.css("overflow","hidden");
            var ts = s-1;
            var t = 0;
            $("ul", obj).css('width',s*w);          
            if(!options.vertical) $("li", obj).css('float','left');

            if(options.controlsShow){
                var html = options.controlsBefore;
                if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
                html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
                html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
                if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
                html += options.controlsAfter;                      
                $(obj).after(html);                                     
            };

            $("a","#"+options.nextId).click(function(){     
                animate("next",true);
            });
            $("a","#"+options.prevId).click(function(){     
                animate("prev",true);               
            }); 
            $("a","#"+options.firstId).click(function(){        
                animate("first",true);
            });             
            $("a","#"+options.lastId).click(function(){     
                animate("last",true);               
            });     

            function animate(dir,clicked){
                var ot = t;             
                switch(dir){
                    case "next":
                        t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;                     
                        break; 
                    case "prev":
                        t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
                        break; 
                    case "first":
                        t = 0;
                        break; 
                    case "last":
                        t = ts;
                        break; 
                    default:
                        break; 
                };  

                var diff = Math.abs(ot-t);
                var speed = diff*options.speed;                     
                if(!options.vertical) {
                    p = (t*w*-1);
                    $("ul",obj).animate(
                        { marginLeft: p }, 
                        speed
                    );              
                } else {
                    p = (t*h*-1);
                    $("ul",obj).animate(
                        { marginTop: p }, 
                        speed
                    );                  
                };

                if(!options.continuous && options.controlsFade){                    
                    if(t==ts){
                        $("a","#"+options.nextId).hide();
                        $("a","#"+options.lastId).hide();
                    } else {
                        $("a","#"+options.nextId).show();
                        $("a","#"+options.lastId).show();                   
                    };
                    if(t==0){
                        $("a","#"+options.prevId).hide();
                        $("a","#"+options.firstId).hide();
                    } else {
                        $("a","#"+options.prevId).show();
                        $("a","#"+options.firstId).show();
                    };                  
                };              

                //if(clicked || (options.auto && options.pauseOnHover ) clearTimeout(timeout);
                if(options.auto && dir=="next" && !clicked){;
                    timeout = setTimeout(function(){
                        animate("next",false);
                    },diff*options.speed+options.pause);
                };

            };
            // init
            var timeout;
            if(options.auto){;
                timeout = setTimeout(function(){
                    animate("next",false);
                },options.pause);
            };      
            if(options.hoverpause && options.auto){
                $(this).mouseover(function(){
                    clearTimeout(timeout);                  
                }).mouseout(function(){
                    animate("next",false);                  
                })
            }
            if(!options.continuous && options.controlsFade){                    
                $("a","#"+options.prevId).hide();
                $("a","#"+options.firstId).hide();              
            };              

        });

    };

})(jQuery);

& HTML you can initialized slider,

$(document).ready(function(){   
            $("#slider").easySlider({
                auto: true,
                continuous: true,
                hoverpause: true
            });
        });

Answer 2

why not:

        if(options.hoverpause && options.auto){
            $(this).hover(function(){
                clearTimeout(timeout);                  
            },function(){
                timeout = setTimeout(function(){
                    animate("next",false);
                },options.pause);
            })
        }

Answer 3

If on mouseout, or as suggested mouseleave you'd like to restart the timeout instead of it animating to the next use instead:

timeout = setTimeout(function(){
    animate("next",false);
},options.pause);

Answer 4

Thank you so much bnku. The following piece of code worked perfectly fine for me as I just didnt want to pause the regular way, I wanted to pause the slider and keep the mouse moving within the element without being driven to the next slide. If you need assistance, please feel free to ask.

        if (options.hoverpause && options.auto){
        $('#slider').hover(function(){
                clearTimeout(timeout); 
        },function(){
        animate("next",false);
        });
        };