JQuery Easyslider Bugs Out dopo 12 immagini

Question

Sto usando Easyslider W jQuery e quando aggiungo più di circa 11 immagini nella mia UL e utilizzo le immagini di scorrimento successive/precedenti che si spengono e scorre alla prima immagine molto velocemente.

Cosa può causare questo? Guardalo qui http://eminemforum.net/gallery/

<div id="content">
      <div id="slider">
        <ul>
<li><img src="img/gallery/1.jpg" alt="" /></li>
<li><img src="img/gallery/2.jpg" alt="" /></li>
<li><img src="img/gallery/3.jpg" alt="" /></li>
<li><img src="img/gallery/4.jpg" alt="" /></li>
<li><img src="img/gallery/5.jpg" alt="" /></li>
<li><img src="img/gallery/6.jpg" alt="" /></li>
<li><img src="img/gallery/7.jpg" alt="" /></li>
<li><img src="img/gallery/8.jpg" alt="" /></li>
<li><img src="img/gallery/9.jpg" alt="" /></li>
<li><img src="img/gallery/10.jpg" alt="" /></li>
<li><img src="img/gallery/11.jpg" alt="" /></li>
<li><img src="img/gallery/15.jpg" alt="" /></li>
        </ul>
      </div>
    </div>



(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:          2000,
        continuous:     false, 
        numeric:        false,
        numericId:      'controls'
    }; 

    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(); 
        var clickable = true;
        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.continuous){
            $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
            $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
            $("ul", obj).css('width',(s+1)*w);
        };              

        if(!options.vertical) $("li", obj).css('float','left');

        if(options.controlsShow){
            var html = options.controlsBefore;              
            if(options.numeric){
                html += '<ol id="'+ options.numericId +'"></ol>';
            } else {
                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);                                     
        };

        if(options.numeric){                                    
            for(var i=0;i<s;i++){                       
                $(document.createElement("li"))
                    .attr('id',options.numericId + (i+1))
                    .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
                    .appendTo($("#"+ options.numericId))
                    .click(function(){                          
                        animate($("a",$(this)).attr('rel'),true);
                    });                                                 
            };                          
        } else {
            $("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 setCurrent(i){
            i = parseInt(i)+1;
            $("li", "#" + options.numericId).removeClass("current");
            $("li#" + options.numericId + i).addClass("current");
        };

        function adjust(){
            if(t>ts) t=0;       
            if(t<0) t=ts;   
            if(!options.vertical) {
                $("ul",obj).css("margin-left",(t*w*-1));
            } else {
                $("ul",obj).css("margin-left",(t*h*-1));
            }
            clickable = true;
            if(options.numeric) setCurrent(t);
        };

        function animate(dir,clicked){
            if (clickable){
                clickable = false;
                var ot = t;             
                switch(dir){
                    case "next":
                        t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;                       
                        break; 
                    case "prev":
                        t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
                        break; 
                    case "first":
                        t = 0;
                        break; 
                    case "last":
                        t = ts;
                        break; 
                    default:
                        t = dir;
                        break; 
                };  
                var diff = Math.abs(ot-t);
                var speed = diff*options.speed;                     
                if(!options.vertical) {
                    p = (t*w*-1);
                    $("ul",obj).animate(
                        { marginLeft: p }, 
                        { queue:false, duration:speed, complete:adjust }
                    );              
                } else {
                    p = (t*h*-1);
                    $("ul",obj).animate(
                        { marginTop: p }, 
                        { queue:false, duration:speed, complete:adjust }
                    );                  
                };

                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) 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.numeric) setCurrent(0);

        if(!options.continuous && options.controlsFade){                    
            $("a","#"+options.prevId).hide();
            $("a","#"+options.firstId).hide();              
        };              

    });

};

}) (jQuery);

codice

    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
    margin:0;
    padding:0;
    display:block;
    overflow:hidden;
    text-indent:-8000px;
    padding-left: 5px;
            }
    /* // image replacement */          
    #content{
    position:relative;
    /* [disabled]padding-bottom: 20px; */
    /* [disabled]background-color: #c8cfd5; */
    border-top: 5px solid #fff;
    border-left: 5px solid #fff;
    border-bottom: 5px solid #fff;
    border-right: 5px solid #fff;
    width: 940px;
    margin: 0 auto;
        }           

/* Easy Slider */

    #slider ul, #slider li,
    #slider2 ul, #slider2 li{
    margin:0;
    padding:0;
    list-style:none;
        }
    #slider2{
    margin-top:1em;
}
    #slider li, #slider2 li{
    /* 
            define width and height of list item (slide)
            entire slider area will adjust according to the parameters provided here
        */ 
    /*width:945px;*/
    width:940px;
    height:510px;
    overflow:hidden;
        }   
    #prevBtn, #nextBtn,
    #slider1next, #slider1prev{
    display:block;
    width:30px;
    height:77px;
    position:absolute;
    left:-40px;
    top:200px;
    z-index:1000;
        }   
    #nextBtn, #slider1next{
    left:940px;
        }                                                       
    #prevBtn a, #nextBtn a,
    #slider1next a, #slider1prev a{
    display:block;
    position:relative;
    width:31px;
    height:77px;
    background:url(img/btn_prev.gif) no-repeat 0 0;
        }   
#shadows {
    height: 98px;
    position: reletive;
    z-index: 1;
    display: block;
    margin: 0px auto;
    bottom:20px;

}
.shadow1 {
    background-image: url(img/gallery_shadow-left.jpg);
    float: left;
    height: 98px;
    width: 130px;
    position:absolute;
    bottom:147px;
    margin-left:-343px;
    z-index:1000;
}
#shadows .shadow2 {
    background-image: url(../img/gallery_shadow-right.jpg);
    display:block;
    width:98x;
    height:130px;
    position:absolute;
    left:-40px;
    top:200px;

}

    #nextBtn a, #slider1next a{ 
        background:url(img/btn_next.gif) no-repeat 0 0; 
        }   

    /* numeric controls */  

    ol#controls{
        margin:1em 0;
        padding:0;
        height:28px;    
        }
    ol#controls li{
        margin:0 10px 0 0; 
        padding:0;
        float:left;
        list-style:none;
        height:28px;
        line-height:28px;
        }
    ol#controls li a{
        float:left;
        height:28px;
        line-height:28px;
        border:1px solid #ccc;
        background:#DAF3F8;
        color:#555;
        padding:0 10px;
        text-decoration:none;
        }
    ol#controls li.current a{
        background:#5DC9E1;
        color:#fff;
        }
    ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* // Easy Slider */

Answer 1

Sembra che il plugin - almeno, la tua copia - necessita di JQuery 1.3.2 (che è molto obsoleto).

http://jsfiddle.net/mattball/puw5e/

Evviva i plugin che non vengono aggiornati quando lo fa JQuery.

Answer 2

Dopo aver studiato questo problema, credo che il problema non sia affatto la versione jQuery. Credo che il problema sia causato da valori molto grandi margin-left. Nel mio Firefox il problema appare su valori intorno al segno di 10.000 pixel.

Quindi dovresti modificare il codice non solo per aumentare ciecamente il valore sempre. Usa un modo diverso.

Answer 3

`

<div class="slider-wrapper">
        <ul class="slider clearfix">
            <li class="first">
                <img src="img1.jpg" width="300" height="350" />
            </li>
            <li>
                <img src="img2.jpg" width="400" height="450" />
            </li>
            <li>
                <img src="img3.jpg" width="500" height="550" />
            </li>
            <li>
                <img src="img4.jpg" width="450" height="350" />
            </li>
            <li>
                <img src="img5.jpg" width="350" height="550" />
            </li>
            <li>
                <img src="img3.jpg" width="400" height="350" />
            </li>
            <li>
                <img src="img4.jpg" width="250" height="350" />
            </li>
            <li>
                <img src="img4.jpg" width="250" height="350" />
            </li>
            <li>
                <img src="img4.jpg" width="250" height="350" />
            </li>
            <li>
                <img src="img4.jpg" width="250" height="350" />
            </li>
            <li>
                <img src="img4.jpg" width="250" height="350" />
            </li>
            <li>
                <img src="img4.jpg" width="250" height="350" />
            </li>
            <li class="last">
                <img src="img12.jpg" width="600" height="350" />
            </li>
        </ul>
        <a href="#" title="Prev" class="prev left">Prev</a>
        <a href="#" title="Next" class="nxt right">Next</a>
    </div>`


$(function(){


var cnt = 0;
  var liItems = $('.slider > li');
  var itemLen = liItems.length;



function getMaxLiWidth(){
   var maxWidth = 0;
     $(liItems).each(function(i){
    if(this.offsetWidth > maxWidth)
      maxWidth = this.offsetWidth + 30;
     });
     return maxWidth;
  }



if(itemLen > 1){
   $('.slider-wrapper').css('width', getMaxLiWidth());
  }
  $('.slider').css('width', getMaxLiWidth()*itemLen);
  $(liItems).css('width', getMaxLiWidth());
  var sliderWid = $('.slider > li').outerWidth();

  $('.prev').addClass('disable');

  $('.nxt').click(function(){
   if($(this).hasClass('clicked')){
    return
   }
   $(this).addClass('clicked');
   $('.prev').removeClass('disable');   
    $(this).removeClass('disable');
    cnt++;
    $('.slider').animate({'left': sliderWid * (-cnt)}, 500, function(){
     $('.nxt').removeClass('clicked');
     if( cnt == itemLen -1){
      $('.nxt').addClass('disable');
     }
    });
  });
  $('.prev').click(function(){
   if($(this).hasClass('clicked')){
    return
   }
   $(this).addClass('clicked');
   $('.nxt').removeClass('disable');   
    $(this).removeClass('disable');
    cnt--;
    $('.slider').animate({'left': sliderWid * (-cnt)}, 500, function(){
     $('.prev').removeClass('clicked');
     if( cnt == itemLen-8){
      $('.prev').addClass('disable');
     }
    }); 
  });
 });