Bonjour à tous,
voila j'ai un gros problème j'ai fais ce script pour un carrousel mais il y a un bug que je n'arrive pas à résoudre ! En faite quand la dernière image est slider elle l'est 2 fois donc visuellement ça fait pas très beau !! Et quand on se trouve sur cette dernière en elemCurrent et que l'on click pour aller sur un autre slide on vois le même phénomène l'image et slider 2 fois ! Mais cela n'a lieu uniquement que pour la dernière image et je comprend absolument pas pourquoi !!!

Merki d'avance !

<script type="text/javascript">
    var carrousel = {

      nbSlide : 0,
      nbCurrent : 1,
      elemCurrent : null,
      elem : null,
      timer : null,
      num : 1,

      init : function(elem){

          this.nbSlide = elem.find(".slide").length;
          //creer la pagination
          elem.find("menu_carrousel").append('<ul></ul>');
          for(var i=1;i<=this.nbSlide;i++){
              titre = elem.find("contenu div.slide:nth-child("+i+") titre").text();
              elem.find("menu_carrousel ul").append("<li id='"+i+"'>"+titre+"</li>");
          }

          width = 920 / this.nbSlide - 31;  
          elem.find("menu_carrousel ul li").css("width",width);
          elem.find("menu_carrousel ul li:last").css("border","none").css("width", width + 1);  
          //initialisation du carrousel 
          elem.find("menu_carrousel ul li").click(function(){ carrousel.gotoSlide($(this).attr("id")); });

          this.elem = elem;
          elem.find("contenu div.slide").hide();
          elem.find("contenu div.slide:first").show();
          this.elemCurrent = elem.find("contenu div.slide:first");
          this.elem.find("menu_carrousel ul li:first").addClass("active");
          //installation de la fleche
          carrousel.fleche("1", elem);    
          // On cré le timer          
          carrousel.play();
          // Stop quand on passe dessus
          elem.mouseover(carrousel.stop);
          elem.mouseout(carrousel.play);
      },
      gotoSlide : function(num){

          if(num==this.nbCurrent){return false; }

          if(num<this.nbCurrent){ hide = "up"; show = "down";} else { hide = "down"; show = "up" }
          this.elemCurrent.hide("slide", { direction: hide }, 1000);
          this.elem.find("div.slide#"+num).show("slide", { direction: show }, 1000);
          this.elem.find("menu_carrousel ul li").removeClass("active");
          this.elem.find("menu_carrousel ul li:eq("+(num-1)+")").addClass("active");
          this.nbCurrent = num;
          this.elemCurrent = this.elem.find("div.slide#"+num);
          carrousel.fleche(num, this.elem);
      },
      fleche : function(num, elem) {
          fleche = elem.find("fleche");
          width = 920 / this.nbSlide;  
          left = num * width - (width/2) - 10;
          fleche.css("left",left);
      },          
      next : function(){
          var num = this.nbCurrent+1;
          if(num >this.nbSlide){
              num = 1;
          }
          this.gotoSlide(num);
      },
      stop : function(){
          window.clearInterval(carrousel.timer);
      },
      play : function(){
          window.clearInterval(carrousel.timer);
          carrousel.timer = window.setInterval("carrousel.next()",5000);
      }  
    }
  </script>

1 réponse


plasma49
Auteur

se qui est vraiment extrêmement étrange c'est que ça le fait exclusivement sur safari !