Curseur avec plusieurs éléments

Je voudrais créer un curseur comme dans ces galeries d'images.
Il devrait afficher des entrées multiples à la fois, comme le montre l'image suivante:Curseur avec plusieurs éléments

http://i.stack.imgur.com/nTBPw.png (@ILMV désolé, je ne suis pas autorisé à le placer par moi-même ..)

Lorsque je clique sur la flèche droite doit glisser ("iPhone") vers la gauche pour que vous puissiez voir 5, 6, 7 et 8.
Les entrées (imagées par des nombres) sont créées dynamiquement.

<div> 
    <ul> 
     <li>1</li> <!-- ← visible --> 
     <li>2</li> <!-- ← visible --> 
     <li>3</li> <!-- ← visible --> 
     <li>4</li> <!-- ← visible --> 
     <li>5</li> <!-- ← not visible --> 
     <li>6</li> <!-- ← not visible --> 
     <li>7</li> <!-- ← not visible --> 
     <li>8</li> <!-- ← not visible --> 
    </ul> 
</div>

Je sais comment fonctionne un curseur et serait en mesure de créer un par moi-même, mais je ne peux pas comprendre comment créer ce (CSS-) mise en page ..

Nous vous remercions à l'avance

EDIT pour que cela soit clair: la commande est pertinente parce que je voudrais construire une vue en forme de grille "tous nos clients", qui sont triés par leurs titres.

Source

2010-08-23 scherii

Avez-vous besoin des articles de la liste * dans cet ordre? Parce que vous avez utilisé un «ul», non ordonné, vous voyez, et si vous le souhaitez, c'est probablement un peu plus complexe. Utilisez un 'ol' si vous le souhaitez. Aussi, (je pense que c'est parce que vous êtes pressé) mais vous avez oublié votre slash de fermeture sur le «li»! –

Bon, pour être plus clair sur ce qui devrait être réalisé par ceci :) Les chiffres représentent les logos de nos clients, qui sont triés par leur nom. J'ai utilisé des listes unorderd parce que le système lui-même est déjà trié par le Quicksand Sort-Plugin (http://razorjack.net/quicksand/demos/one-set-clone.html) - donc ça n'a pas vraiment d'importance ..? Et oui, j'étais pressé - bien sûr les étiquettes doivent être fermées correctement :) Merci – scherii

Le problème avec votre question est que vous n'êtes pas sûr de savoir si vous avez besoin des éléments de la liste dans un ordre particulier ou non. Bien sûr, étant donné que vous utilisez déjà jQuery, il n'y a aucune raison pour laquelle vous ne devriez pas être en mesure de les insérer d'une manière qui serait acceptable pour vous.

Quoi qu'il en soit, j'ai créé quelque chose de simple avec float s. Voici une démonstration simple: http://jsfiddle.net/vPGbf/

Le point crucial de la chose (en ignorant le CSS vraiment envie que je suis coincé là-dedans) sont quelques-uns float très simple ed li, un absolu positionné ol et un div extérieur avec overflow ensemble à caché pour masquer les autres li dont vous n'avez pas encore besoin. C'est vraiment ça. Rappelez-vous que la largeur de ol doit être augmentée lorsque vous ajoutez plus d'éléments, et que pour faire le glissement, vous devez changer la valeur left du ol.

Source

2010-08-23 10:08:08

@scherii Si vous demandez quelqu'un pour vous aider à déboguer votre code, je pense qu'il serait peut-être plus approprié de ouvre une autre question, car cela sortirait du cadre de cette question. –

J'ai réussi à créer une solution avec javascript/jQuery en enveloppant tous les 8 éléments dans un div - je pense que ça fonctionnera comme je le pensais. Merci pour votre aide et votre temps! Je m'excuse pour le fait que je n'ai pas pu me demander ce dont j'avais vraiment besoin, je n'en étais pas sûr moi-même. Si quelqu'un a besoin de savoir comment je l'ai fait, n'hésitez pas à me contacter. – scherii

multiples éléments Cycle Plugin

Fournit un panneau simple défilement aperçu des éléments de la liste. Affiche la plage donnée des éléments li du milieu (en masquant les éléments des bords) et permet le défilement gauche et droit dans la liste. Ne gère pas le défilement automatique ou l'emballage des éléments.

https://github.com/willrossi/jQuery-Multiple-Elements-Cycle

Source

2011-01-31 06:35:26 nasavietnam

URI a changé pour: https://github.com/wilr/jQuery-Multiple-Elements-Cycle – Mathias

Répondre

Questions connexes