comment puis-je animer un div de la largeur de chaque image enfant. et à la fin revenir au début.

Question

J'ai écrit un peu de code pour un carrousel mais je pense qu'il a besoin d'un peu de travail, tout d'abord, je vais expliquer le DOM.

conteneur
conteneur d'images
img
img
img
conteneur d'images de fin
nav
gauche
droite
fin de la nav
récipient final

chaque img flotte à gauche mais a une largeur différente (même hauteur), j'ai utilisé jQuery pour que la largeur du conteneur des images soit la même que les largeurs combinées.

voici donc mon clic droit (je n'ai pas encore fait le gauche)

$('#container .container-nav .container-nav-right').click(function(){
    var scrollAmount = $('.container-images img').width();
    $("#container .container-images").animate({'left':'-=' + scrollAmount}, 'slow');
});

Cela déplace le div conteneur de disons 230px à chaque fois, mais je veux qu'il le déplace de 230, 240, 260 etc. en fonction des images qu'il contient.

Je veux aussi réinitialiser le code une fois qu'on est arrivé à la dernière image.

Je sais qu'il existe de nombreux plugins, mais je veux essayer de comprendre moi-même. J'espère que je m'explique.

Quelqu'un a-t-il des idées ? ou des suggestions quant à la marche à suivre ? Merci de m'avoir lu !

Answer 1

Un petit code pour aider à expliquer la réponse de kinakuta :

var selectedImage = $('.container-images img:first');

$('#container .container-nav .container-nav-right').click(function(){
    var scrollAmount = selectedImage.width();
    $("#container .container-images").animate({'left':'-=' + scrollAmount}, 'slow');
    selectedImage = selectedImage.next();
});

Answer 2

Vous devez sélectionner chaque image individuellement - vous récupérez tout ce qui correspond à votre sélecteur et cela ne va renvoyer que la largeur() de la première. Une façon de résoudre ce problème est d'ajouter/supprimer une classe pour l'image "sélectionnée". Vous commencez avec la première image ayant la classe "current", et l'utilisez pour former un sélecteur plus spécifique. Ensuite, lorsque vous passez à l'image suivante, vous la supprimez de l'image actuelle et l'ajoutez à la suivante. Il existe d'autres moyens d'y parvenir, mais, à première vue, c'est la première stratégie que j'adopterais.

Oh, et j'ai oublié la deuxième partie de votre question. Pour obtenir l'image suivante, appelez la méthode next() sur l'image actuelle. Si rien n'est renvoyé, vous avez atteint la fin de vos images et vous pouvez revenir au début.