JQuery Easyslider se escapa después de 12 imágenes

Question

Estoy usando EasySlider w jQuery y cuando agrego más de 11 imágenes en mi UL y uso las siguientes imágenes de control deslizante anterior, se esconde y se desliza a la primera imagen muy rápido.

¿Qué puede estar causando esto? Véalo aquí 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);

código

    /* 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

Parece que el complemento, al menos, su copia, necesita jQuery 1.3.2 (que es muy fuera de plazo).

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

Hooray para complementos que no se actualizan cuando jQuery lo hace.

Answer 2

Después de haber investigado este problema, creo que el problema no es la versión jQuery en absoluto. Creo que el problema es causado por valores muy grandes en margin-left. En mi Firefox, el problema aparece en valores alrededor de la marca de 10,000 píxeles.

Por lo tanto, tendría que modificar el código para no solo aumentar ciegamente el valor todo el tiempo. Usa una forma diferente.

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