Discussion :

[orobouros]

Bonjour à tous,

j'utilise un slider assez simple trouvé sur le net ici : http://www.w3schools.com/w3css/tryit...s_slideshow_rr

Il fonctionne sans problèmes. Je l'ai mis dans une page php que j'appelle sur ma page d'accueil via un include, je trouve ça plus pratique à modifier.

Mon problème est que je ne maitrise pas du tout les scripts et malgré mes recherches sur le web, je n'ai pas trouvé comment faire pour ajouter certaines fonctions.

La fonction principale que je cherche à ajouter à ce script est la mise en pause du slider lorsqu'on le survole avec la souris, et bien sur son redémarrage quand on ne le survole plus.

Dans l'idéal, je recherche aussi comment ajouter des boutons de navigation droite / gauche pour naviguer dans le slider.

Pouvez-vous m'expliquer comment faire, j'y ai consacré plusieurs jour sans arriver au moindre résultat.

Merci par avance

[Beginner.]

Salut,

Pour la première partie, tu peux essayer cela : http://jsbin.com/ruvekazazu/edit?html,output...

[SylvainPV]

Avis personnel, je déconseille fortement w3schools dont le contenu est de piètre qualité, tant sur la doc que sur les scripts fournis. (à lire: http://blog.sidnair.com/post/1658789...chools-problem)

Il existe des centaines de carousels en JS, as-tu songé à en choisir une autre qui possède déjà les fonctions que tu cherches ? Comme celui-ci : http://kenwheeler.github.io/slick/ et son paramètre pauseOnHover par défaut à true

[Beginner.]

Désolé mais je débute aussi, alors c'est quoi l'effet fading ?

Si une bonne âme peut me donner une solution pour ajouter des boutons pour la navigation entre les images, je reste preneur bien évidemment.

J'étais en train de le faire, essai cela :http://jsbin.com/subodoveli/edit?html,output

Il existe des centaines de carousels en JS, as-tu songé à en choisir une autre qui possède déjà les fonctions que tu cherches ? Comme celui-ci : http://kenwheeler.github.io/slick/ et son paramètre pauseOnHover par défaut à true

Merci, je vais regarder ça...

[Beginner.]

Ah l'affichage du numéro des images n'était pas bon, j' ai corrigé : http://jsbin.com/vevibowasu/1/edit?html,output

[orobouros]

Merci beaucoup, une fois de plus ça fonctionne (bien sur en adaptant un peu à mon cas).

Il existe des centaines de carousels en JS, as-tu songé à en choisir une autre qui possède déjà les fonctions que tu cherches ? Comme celui-ci : http://kenwheeler.github.io/slick/ et son paramètre pauseOnHover par défaut à true

Par acquis de conscience j'ai essayé cette solution (comme pas mal d'autres trouvées un peu partout sur le web), mais je ne suis pas arrivé à la mettre en place correctement sur ma page d'accueil. Il se trouve que j'ai une bannière slider en head, et quand j'eesaye ce script, non seulement ma mise en page est complètement désordonnée, mais en plus mon slider en Head disparait.
C'est pour cela que j'ai retenu la solution de w3school qui fonctionne sans interférer avec le reste de ma page.

Désolé mais je débute aussi, alors c'est quoi l'effet fading ?

L'effet Fading, c'est quand l'image disparait progressivement pour qu'une autre apparaisse, comme ça : http://www.w3schools.com/w3css/tryit...ideshow_fading

A présent j'essaye d'intégrer les boutons directement sur l'image, comme dans ce cas : http://www.w3schools.com/w3css/tryit...lideshow_dots2

Mais je n'y arrive pas pour l'instant. Je persévère.

Merci à tous pour votre aide précieuse

[orobouros]

Merci beaucoup, ça fonctionne très bien, même si j'ai perdu mon effet de fading au passage. Je n'ai pas trouvé comment le remettre en fonction. J'avais ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="adresse de lien vers une page"><img class="mySlides w3-animate-fading" src="adresse de l'image du slider"></a>

et pour que ça fonctionne, j'ai été obligé de supprimer le w3-animate-fading qui me permettait d'avoir l'effet de fading.

Si une bonne âme peut me donner une solution pour ajouter des boutons pour la navigation entre les images, je reste preneur bien évidemment.

Merci encore pour l'aide apportée

[SylvainPV]

fade: true dans la config de slick d'après la doc