11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
je suis a la recherche depuis quelques jours d'un slider a deux dimensions.
Ca ne veut peut etre rien dire alors je m'explique.

Le slider aurait 4 fleches, en haut, bas, gauche, droite.
les fleches gauche et droite ont une fonction classique de faire defiler une liste d'images, mais j'aimerais que les fleches haut, bas elles servent a changer la categorie des images qui defilents.
J'ai essaye plusieurs choses mais rien de concluant pour le moment, je suis donc a la recherche d'un example, pour avoir des idees.
Si j'ai ete clair et que vous savez ou je peux trouver ca je vous en remercie d'avance Smiley smile
Modifié par uggoo (05 Apr 2013 - 23:16)
Tel que je le visualise, ton slider est un tableau, chaque cellule est une photo, chaque ligne est une catégorie. Ensuite, je créé un cadre, il permet de ne viser qu'une cellule en particulier.
Le vocabulaire que j'utilise est volontairement assez loin du code final, en effet, ceci te permet de bien comprendre ce que j'imagine.

Pour mettre en oeuvre cette idée vague, il te faut créé une div (le cadre) en overflow:hidden. Ensuite, à l'interieur tu peux mettre un tableau, cela facilite le classement par catégorie. Pour intervenir sur la cellule visée, tu positionne le tableau (en relative) et tu joue avec les propriétés top et left. C'est très simple en javascript. Après, pour ajouter un effet "slide" je te conseille tout simplement d'appliquer une transition sur le tableau. Essaye de construire ton code sur ce shéma qui selon moi est le plus approprié.

En tout cas, je pense qu'il est beaucoup plus instructif de concevoir soit-même ce genre d'élément, tu en sortira plus expérimenté, et si tu a besoin de le modifier, c'est plus facile car tu en est l'auteur.
Modifié par juliendargelos (09 Apr 2013 - 12:38)
pour résoudre ton pb il y a un plug-in jquery qui permet de se déplacer horizontalement, verticalement et même en diagonale :
http://demos.flesler.com/jquery/scrollTo/
ça marche bien, c'est souple et en plus c'est simple à paramétrer
par contre il vaut mieux prévoir une div menu fixe pour se déplacer.
Modifié par gazobu (14 Apr 2013 - 23:44)
J'avais un problème avec un <table> alors j'ai utilise des <div> avec des display table et table-cell.
Je vais regarder le pluggin merci