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

[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

[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

[Beginner.]

Ok merci, je vais regarder...

Je vais aussi regarder comment ils font pour les placements des boutons...

[Beginner.]

Pour les flèches à l'intérieur j'ai fait ça : http://jsbin.com/konimotope/edit?html,output

Je n'ai pas utilisé le float comme eux car gérer les histoires de débordements ce n'est pas trop mon truc, j'ai utilisé position:absolute... Tu peux changer l'emplacement des flèches avec le CSS...

Comme les flèches sont à l'intérieure, le défilement s’arrête dés qu'on les survole avec la souris donc plus besoin d'utiliser clearTimeout(timeID); et timeID = setTimeout(carousel, 1500); (je les ai laissé en commentaire).

Sinon dans leur exemple et aussi dans le mien, j'ai remarqué que si tu cliques deux fois (double clique) sur une flèche elle se retrouve avec un fond bleu (texte sélectionné), on peut empêcher cela avec quelques lignes de CSS, du moins cela avait fonctionné dans un autre code sur lequel j'avais travaillé...

[orobouros]

Excellent ! En adaptant au quart de poil pour mon site, ça fonctionne parfaitement. J'ai pu ajouter facilement quelques paramètres pour agrandir les flèches et les positionner au centre de l'image dans le css, et le rendu est vraiment comme je le souhaitais.

Un grand merci à tous pour tout le mal que vous vous êtes donné et le temps consacré pour résoudre mon problème !

[Beginner.]

Ah ben tant mieux...

Et l'effet fading, c'est bon aussi ?

PS : Dans ce cas il faut que tu mettes le fil en "résolu".

[orobouros]

Concernant l'effet fading, je n'y suis pas arrivé mais ce n'est pas bien grave dans le sens où les transitions entre les images ne choquent pas à visuellement.

j'attendais un peu pour mettre le fil en résolu, pour que des personnes puissent éventuellement intervenir (je trouvais ça un peu "sauvage" de le faire brutalement ). Du coup je le fais maintenant.

Merci encore à tous pour toute l'aide.

[Beginner.]

Oui c'est vrai tu as raison, même si en fait on peut toujours intervenir fans un fil "résolu" cela pourrait quand même dissuader d'autre de participer et d'enrichir le fil...