Изменить время паузы первого слайда в Easy Slider

Я использую плагин Easy Slider 1.5, и я пытался (хотя я понятия не имею, что я сделал)... изменить время паузы первого слайда с 4000 до 8000.

Я не знаю, как мне поступить с кодом. Но, согласно моей логике, я думаю, что я должен попытаться получить li:first-child, а затем установить pause: 8000

Ищу помощи о том же!

Обновлять -

У меня пока так -

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

person omkarbhagat    schedule 13.02.2014    source источник
comment
кроме времени паузы, работает корректно?   -  person Chen-Tsu Lin    schedule 13.02.2014
comment
первый слайд не останавливается на 15 секунд, он останавливается только на 4 секунды   -  person omkarbhagat    schedule 13.02.2014


Ответы (2)


Кажется, что Easy Slider не может установить опцию для отдельного слайда.

Вот исходный код, он не предоставляет метод изменения отдельного слайда. Если вы хотите использовать этот плагин, чтобы делать то, что вы хотите, вы должны переписать некоторый код, чтобы изменить исходный код.

(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);
person Chen-Tsu Lin    schedule 13.02.2014
comment
как это возможно? должен быть какой-то способ, не так ли? - person omkarbhagat; 13.02.2014
comment
Я нахожу простой пример слайда. Но он устанавливает параметр только с помощью .easyslide для всего silder. - person Chen-Tsu Lin; 13.02.2014
comment
Я обновляю свой ответ. Я думаю, что использование другого плагина будет выбором. - person Chen-Tsu Lin; 13.02.2014
comment
какой плагин посоветуете? - person omkarbhagat; 13.02.2014
comment
надеюсь, что это поможет: stackoverflow.com/questions/13315904/ - person Chen-Tsu Lin; 13.02.2014
comment
Спасибо Чен. Я решил проблему, проверьте ниже. Я поделился своим подходом. - person omkarbhagat; 15.02.2014

Я решил проблему. Использовал EasySlider 1.7. И изменил некоторый код, чтобы получить желаемый результат.

Вот как я это сделал - (мой пост в блоге) http://thecuriousengineer.org/how-to-change-the-pause-time-of-first-slide-in-easyslider/

person omkarbhagat    schedule 15.02.2014