custom jquery slider

Question

J'essaye de créer un curseur dans jquery et bloqué à la fin.

J'ai créé un <ul> puis 4 <li> dans ce <ul> représentant chaque <li> une diapositive. Lorsque je clique sur le bouton suivant, la diapositive 1 est animée à la diapositive 2. Lorsque je clique sur le bouton suivant, la diapositive actuelle est animée à la suivante. Mais comment animer la dernière diapositive pour charger la première diapositive.

Je modifie la valeur de la propriété left pour l'animer parmi les diapositives. Le code est donné ci-dessous. Guidez-moi s'il-vous-plaît. Merci!

 current = 0; 

     current_slide=1; 

     $(document).ready(function(){ 
      var totalSlides=$(".slider ul li").length; 
      $(".slider ul").removeAttr('width'); 
      $(".slider ul").attr('width',951*totalSlides); 

      $('#next img').click(function(){ 
       current_slide++; 
       current -= 951; 
       if(current_slide>totalSlides) 
        { 
         current=0; 
         current_slide=1; 
         $(".slider ul").css('left',0);  
        } 
       $(".slider ul").animate({"left":current+"px"}, "slow"); 
      }); 

     /* Previous button is not fully functional yet*/ 
      $('#prev img').click(function(){ 
       current_slide--; 
       current += 951; 
       if(current_slide==1) 
        {current=0;current_slide=totalSlides;} 
       $(".slider ul").animate({"left":current+"px"}, "slow"); 
      }); 
     }); 

Answer 1

Je ne suis pas sûr de ce que vous entendez par « charge 1ère slide », le code que vous avez devrait apparaître pour revenir en arrière quand vous arrivez à l'une des extrémités de vos diapositives. Mais en regardant votre code, si vous supprimez simplement $(".slider ul").css('left',0); cela devrait fonctionner.

Aussi, dans le code précédent, j'ai changé le numéro actuel de zéro à 951 * totalSlides pour le positionner au bon endroit - je ne l'ai pas testé, donc il pourrait avoir besoin d'être 951 * (totalSlides - 1).

current = 0; 

    current_slide=1; 

    $(document).ready(function(){ 
     var totalSlides=$(".slider ul li").length; 
     $(".slider ul").removeAttr('width'); 
     $(".slider ul").attr('width',951*totalSlides); 

     $('#next img').click(function(){ 
      current_slide++; 
      current -= 951; 
      if(current_slide>totalSlides) 
       { 
        current=0; 
        current_slide=1;  
       } 
      $(".slider ul").animate({"left":current+"px"}, "slow"); 
     }); 

    /* Previous button is not fully functional yet*/ 
     $('#prev img').click(function(){ 
      current_slide--; 
      current += 951; 
      if(current_slide==1) 
       { 
        current = 951 * totalSlides; 
        current_slide = totalSlides; 
       } 
      $(".slider ul").animate({"left":current+"px"}, "slow"); 
     }); 
    }); 

Notez également qu'il ya a bug dans la jQuery animation lorsque vous avez quitté négativement positionné> 10.000 pixels - il devrait être corrigé dans la version 1.5. Donc, si vous utilisez beaucoup de diapositives, je vous recommande de passer votre code pour utiliser scrollLeft

---

Mise à jour:

Eh bien, si vous voulez un curseur infini, il existe deux méthodes que vous pouvez utiliser:

1. Empilez toutes vos diapositives et masquez toutes les diapositives, sauf la diapositive en cours. Lorsque l'utilisateur clique sur le bouton suivant ou précédent, placez la diapositive suivante sur le côté approprié et faites glisser l'actuel hors de vue et le nouveau en vue - vérifiez ce jQuery Slider qui utilise cette méthode.

2. La 2ème méthode fait flotter toutes les diapositives, puis duplique la première et la dernière diapositive. La première diapositive est ajoutée après la dernière et la dernière diapositive est ajoutée avant la première. Ensuite, lorsque vous êtes sur la dernière diapositive et appuyez sur suivant, la diapositive clonée se déplace dans la vue. Lorsque l'animation est terminée, repositionnez la vue sur la première diapositive. Cette méthode est utilisée par mon jQuery AnythingSlider.