在Easy Slider中更改第一张幻灯片的暂停时间

Question

I am using Easy Slider 1.5 Plugin and I was trying (although I've no idea what i did).. to change the pause time of first slide to 8000 from 4000.

I don't know how i should go about it with code. But according to my logic, I think i should try and fetch the li:first-child and then set the pause: 8000

Looking for help about the same!

Update -

I have this so far -

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

<div id="slider">
        <ul>                
            <li id="firstSlider"><a href="http://templatica.com/preview/30"><img src="../../images/flash-image.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/7"><img src="../../images/flash-image2.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>          
        </ul>
    </div>

Answer 1

It seems that Easy Slider can't set option to separately slide.

Here is the source code, it did not provide method to modify separate slide. If You want to use this plug-in to do what you want, you must to rewrite some code to modify source code.

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

Answer 2

I solved the problem. Used EasySlider 1.7. And modified some code to get the desired result.

Here's how i did it - (my blog post) http://thecuriousengineer.org/how-to-change-the-pause-time-of-first-slide-in-easyslider/