Discussion :

[spip93]

Bonjour à tous et à toutes,

Je travaille actuellement sur un portail informatique qui utilise un carrousel.

En cherchant un peu, j'ai découvert que celui-ci utilisait jQuery et plus particulièrement le plugin Cycle2 (voir l'exemple ici)

Problème 1 : Le carrousel est en défilement automatique, or je voudrais qu'il défile uniquement en cliquant sur les chevrons de part et d'autre.

Problème 2 : (Pour une raison qui serait trop longue à expliquer), disons que le carrousel est un "bloc" (que j'appelle grâce à une variable Twig) et, ce qu'il faut retenir c'est que, je ne peux pas modifier le HTML.

Je suis allé sur le site de Cycle2 qui m'a emmené sur le Github. Là, j'ai vu ce post où, en gros, le dev de Cycle2 dit d'ajouter à la div avec la classe "slideshow" l'attribut

Code :

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

data-cycle-timeout=0

J'ai donc cherché sur Internet comment insérer, grâce à JS, cet attribut à la div avec la classe "slideshow" de ma page d'exemple. J'ai trouvé et entré dans la console le code suivant :

Code :

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

 document.getElementsByClassName ('slideshow') [0] .setAttribute ("data-cycle-timeout", 0);

Ça a fonctionné (bizarrement uniquement sur le 1er carrousel alors qu'il y en a 2 sur la page), ça a bien ajouté l'attribut

Code :

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

data-cycle-timeout = "0"

(notez ici que le 0 est entre guillemets et pas sans guillemets)
mais ça n'a pas arrêté pour autant le défilement automatique (est-ce que c'est à cause de ce 0 entre guillemets ?)

Du coup, j'ai posé la question sur le Github de Cycle2, mais le dev n'a pas donné signe de vie depuis un bon moment (depuis 2014 je crois). Bref, ayant peu d'espoir de réponse, je viens ici

Comment donc faire, en utilisant le JS (où je suis un bille d'où ma question ici ) pour empêcher la lecture automatique du carrousel ?

Je vous remercie pour vos lumières et vos réponses.

Bonne journée à vous.

[spip93]

Pour info, j'ai changé mon fusil d'épaule :

1 - au lieu d'ajouter "data-cycle-timeout=0" à la div qui a la classe "slideshow", je l'ai ajouté à la div parente qui a un ID et non une classe

2 - Si je l'ajoute via la console JS avec le code suivant :

Code :

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

document.getElementById("content-233887").setAttribute ("data-cycle-timeout", 0);

ça s'ajoute bien, mais ça n'arrête pas le défilement

En revanche, si j'ajoute

Code :

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

data-cycle-timeout=0

"à la main" en modifiant le HTML, déjà ça m'ajoute systématiquement les guillemets autour du 0 et ensuite, ça a l'air de fonctionner (le carrousel s'arrête).

Bref, je suis toujours aussi perplexe et ne sais plus quoi faire (mes compétences en JS étant très très limitées)