Discussion :

[nicerico]

Bonjour

j'ai un petit carousel qui doit afficher l'image suivante et l'image precedente
pour cela je m'aide de deux fleches (gauche et droite)
quand on clique sur la fleche de droite, ça active le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$( "#fld" ).click(function(e) {
    e.preventDefault();
    $("#slider ul li:first-child").animate({"margin-left": -140}, 800, function(){  
        $(this).css("margin-left","2%").appendTo("#slider ul").fadeIn(1000);  
    });  
});

ça fonctionne bien
mon souci est la fleche de gauche
ça n'affiche pas ce que je voudrais avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$( "#flg" ).click(function(e) {
    e.preventDefault();
    $("#slider ul li:last-child").animate({"margin-left": +140}, 800, function(){  
        $(this).css("margin-left","2%").appendTo("#slider ul:first").fadeIn(1000);  
    });  
});

en shematisant
par defaut j'ai les images 1 2 3 4 5 6 qui sont visibles
avec la fleche de droite j'obtiens 2 3 4 5 6 7
mais si je fais la fleche de gauche je ne revient pas à 1 2 3 4 5 6

Merci de votre aide

[NoSmoking]

Bonjour,
un minimum de code HTML serait le bienvenu !

[nicerico]

voilà

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="slider">
     <ul>
               <li>image1</li>
               <li>image2</li>
               <li>image3</li>
               <li>image4</li>
               <li>image5</li>
               <li>image6</li>
               <li>image7</li>
               <li>image8</li>
                ...
     </ul>
     <a href="" id="flg"></a>
     <a href="" id="fld"></a>
</div>

seules 6 images sont visibles

[NoSmoking]

Je pense que c'est dans la démarche du slide vers la droite (apparition par la gauche) que cela pêche.

Tu ne peux pas traiter cela comme pour le "slide droite" où tu translates puis tu déplaces l'élément en fin d'animation.

Dans le "slide gauche" il te faut d'abord déplacer l'élément avant de lancer la translation.

En gros

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$( "#flg" ).click(function(e) {
    e.preventDefault();
 
  var dernier = $("#slider ul li:last"),
      premier = $("#slider ul li:first");
    // on sdétache l'élément de fin et on lui met la marge qui va bien
    dernier.detach().css("margin-left", -140);
    // on le transfrère devant le premier
    premier.before( dernier);
    // et on lance le déplacement
    dernier.animate({"margin-left": 0}, 800);
});

[nicerico]

ok je vais voir dans ce sens Merci