jQuery Défilement horizontal avec une largeur inconnue des articles

Question

Je crée une galerie en utilisant jQuery qui affiche des images horizontalement, avec un bouton "gauche" et "droit" ci-dessous, qui fait défiler la rangée d'images. Il y a beaucoup de tutoriels et de plugins pour cela.

Le problème pour moi cependant, c'est que 1) je ne connais pas la largeur des images. Et 2) J'ai besoin de l'objet que je défile pour être centré.

Comment procéder?

Merci beaucoup, Gorm

---

D'accord, je vais essayer de préciser.

que j'ai une rangée horizontale des images (à hauteur fixe mais de largeur inconnue - quoique inférieure à celle du récipient environnante), avec un bouton « Suivant » et « Précédent » comme

<div class="imgContainer"> 
    <ul> 
    <li><img src="01.jpg" alt=""></li> 
    <li><img src="02.jpg" alt=""></li> 
    <li><img src="03.jpg" alt=""></li> 
    <li><img src="04.jpg" alt=""></li> 
    ... 
    </ul> 
</div> 
<a href="#" id="prev">Previous image</a> 
<a href="#" id="next">Next image</a> 

lors du chargement de la page , la première image est affichée au centre, avec les images suivantes vers la droite.

Lorsque vous cliquez sur "Image suivante", la rangée d'images défile pour centrer l'image suivante.

J'ai essayé différentes "solutions", mais je suis trop une recrue js/jquery pour cela je pense. Donc toute aide serait grandement appréciée. :-)

Answer 1

Eh bien,

1. Calculer la largeur des images
2. Centre l'élément que vous défilement

, vous avez besoin sérieusement de fournir un peu plus d'informations pour obtenir réponses significatives.

Vous pouvez calculer la largeur des images à l'intérieur d'une collection comme ceci:

var totalWidth = 0; 
$('.container img').each(function() { 
    totalWidth += $(this).outerWidth(); 
}); 

Sinon, il est tout simplement Arithmétique simples. Donnez plus de détails sur les problèmes auxquels vous êtes confrontés si cela ne vous aide pas.