Navigation gauche/droite

Bonjour à tous,

J'ai déjà posté une question pour le même site, mais à force de chercher un peu partout, je suis entrain de me rendre compte que le problème doit être ailleurs.

J'ai un site fait via wordpress avec différents articles qui se suivent les uns après les autres sur l'horizontal. Il n'y a pas de largeur limite, c'est pour cela que j'ai mis dans le CSS un white-space:nowrap.

Tout fonctionne jusque là.

Mais voilà que ça se corse, j'aurais besoin d'une navigation par bouton, qui permette de se déplacer de gauche à droite et vice versa. Or je n'arrive pas à trouver ce que je souhaite. Dans la navigation que j'ai placé actuellement, j'ai du mettre une largeur fixe à #main, mais qui n'est pas pratique, car je voudrais que cela soit faire de manière dynamique.

Il faudrait que la navigation se fasse soit par les boutons, soit par le scroll horizontal.

Voici le lien en exemple. J'espère être assez clair.

Merci pour votre aide

P.S.: Je suis pas très calé en javascript.

exemple
Modifié par playgraphix (08 Feb 2016 - 18:43)

Salut,

Comment souhaites-tu te déplacer ? Image par image ? ou alors scroller sur toute la largeur pour afficher les images suivantes ?

Quoi qu'il en soit, si tu ne gères pas JS il y a pliens de plugins qu font cela.

Salut Gili,

Alors idéalement, il faudrait que le scroll se déplace sur 1x la largeur de la fenêtre.

Un ensemble sur l'effet souhaité :

http://www.kinfolk.com

La gallerie du haut utilise le plugin jQuery custom content scroller, mais le soucis, c'est que j'avais commencé avec ce dernier, mais celui-ci ne réagit pas sur la hauteur de la fenêtre, du coup, si la fenêtre est plus petite que les images, ces dernières ne se réajustent pas.

J'avoue que j'ai un peu puisé sur tout ce que je pouvais trouvé et je ne trouve pas de solution à mon problème.

En gros, selon moi, il faudrait que:

1. la largeur de la DIV qui contient le contenu ait une largeur donnée (variable selon le nombre d'articles postés)
2. que les boutons gauche/droite déplace le scroll du bas de la fenêtre, soit de la largeur de la fenêtre, soit, par exemple de 500px avec un effet fluide.

J'ai trouvé des exemples intéressant, mais je n'arrive pas à les intégrer:

Exemple 1

Exemple 2

Disant que je ne sais pas créer un code, car je n'ai pas toute la logique nécessaire, mais que j'arrive plus au moins à comprendre le fonctionnement de javascript.

Biensûr, je suis preneur d'un plugin adapté, mais je n'ai pas trouvé encore.

Merci pour votre lecture

Mais ce que tu veux c'est pas juste un "carousel" ?

edit : si tu tiens vraiment à toucher au scroll peut-être celui-ci ? http://jquery-plugins.net/horwheel-scroll-horizontally-with-mouse-wheel
Modifié par Gili (08 Feb 2016 - 20:45)

Les deux approches sont intéressantes, mais:

1. Carousel ne semble être valable que pour des images, or il s'agit d'article (via wordpress) et ça ne sera pas nécessairement que des images.
2. Le Horwheel permet de transformer le scroll haut/bas en gauche/droite (qui est assez pratique!).

Je cherche donc vraiment a ce que les boutons que j'ai placé à gauche et à droite, déplace le contenu (la page) à gauche ou à droite et que du coup, le scroll se déplace également. Même effet que si on faisait via la souris, mais par incrément de XXpx.

En gros, un scrollLeft, mais pas sur une zone, mais bien sur la page entière.

Mais peut-être que ce n'est pas possible ?
Modifié par playgraphix (09 Feb 2016 - 15:45)

Un truc très moche fais en deux seconde en javascript pure.
Si tu souhaite l'effet smooth, dirige toi vers jquery !

C'est super ! Ça marche ! MERCI ! UN GRAND MERCI !!!!!

Mais en effet, j'aurais besoin de l'effet smooth. Ça veut dire que je dois rajouter ça en plus où le code doit être totalement adapté au jquery ?

Et j'imagine que la valeur 100, ne peux pas être calculé selon la largeur de la fenêtre utilisateur ?
Modifié par playgraphix (09 Feb 2016 - 16:32)

pour l'effet smooth, il faut que tu télécharge la librairie Jquery, parce que gérer cela en Javascript c'est juste horrible.

Ensuite c'est très simple, voila l'exemple en jquery là je joue sur les pixels et la position de la scollbar, mais tu peux aussi utiliser les ancres pour adapter ton effet de scrolls. exemple visuel
Modifié par JENCAL (09 Feb 2016 - 16:35)

SUPER !!!!

Je te remercie infiniment ! Ça marche exactement comme je voulais et j'ai également réussi à remplacer la valeur de 300px que tu avais mis par la valeur de la largeur de la fenêtre !

C'est GENIAL !

J'ai passé tellement de temps dessus ! Je suis content d'avoir eu une solution !!!!!!

MERCI MERCI MERCI