jquery easyslider bogue après 12 images

Question

J'utilise EasySlider w Jquery et lorsque j'ajoute plus de 11 images dans mon UL et que j'utilise les images de curseur suivant / précédent, il se corrige et glisse vers la première image très rapidement.

Qu'est-ce qui peut en être la cause?voir ici 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);

[code]

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

Il semble que le plugin - du moins, votre copie - nécessite jQuery 1.3.2 (qui est très obsolète).

http://jsfiddle.net/mattball/pUW5e/

Hourra pour les plugins qui ne sont pas mis à jour lorsque jQuery le fait.

Answer 2

Après avoir étudié ce problème, je pense que le problème ne vient pas du tout de la version JQuery.Je crois que le problème est causé par de très grandes valeurs sur margin-left.Dans mon Firefox, le problème apparaît à des valeurs d'environ 10 000 pixels.

Vous devrez donc modifier le code pour ne pas simplement augmenter aveuglément la valeur tout le temps.Utilisez une méthode différente.

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