Stopper carrousel automatique

Bonjour,
Je viens chercher de l'aide car pour un projet de cours nous devons coder notre portfolio (nous sommes des graphistes abandonné devant des lignes de code ) et j'ai trouvé LE code parfait pour présenter mes projets ! Mais, le carrousel se déroule automatiquement ce que je ne veux pas. J'aimerais que vous m'aidiez à comprendre ce que je dois modifier car le HTML je le comprend, le CSS ça va encore par conte JS pas du tout !

Voici le lien sur codepen
https://codepen.io/pdesacastro/pen/zqyJBr?fbclid=IwAR2iBeJ5YMWvmpzwR45IeGUpnc9ns2rdmPAEBP2d8vn8sryl-yNjxTrYN_E

J'ai aussi des difficultés pour placer le carrousel comme je veux, car sur mon site il se met tout en haut dans le header alors que je veux qu'il soit centré. J'ai essayé avec flex-box, justify content etc... mais je ne sais pas sur quelle section je dois modifié (j'ai juste réussi à modifié la typo, les images et la place des flèches )

Si vous vous arriver au moins à me faire comprendre le JS ce srait déjà un bon début
Merci !!

Pour éviter que le carroussel demarre en mode auto, recherche dans le code JS "autoUdpate: true," et remplace par (attention à la virgule):

autoUpdate = false,

Le souci est qu'il n'y a rien pour arrêter ce carroussel démoniaque. Si tu n'as besoin du mode auto, recherche setInterval dans le code JS et rajoute "false" comme suit :

		setInterval(function() {
			if (false && autoUpdate) navigate('right');
		},timeTrans);

Pour centrer le carroussel, le plus simple est de nous donner l'url de ton site

Super merci beaucoup ! Pour l'instant ça à l'air de fonctionner.

Le site ne sera pas en ligne, c'est un exercice, mais je trouverais bien une solution

@nucifrangibulum,

Tu as bien aimé jouer avec l'attribut clip ?
Mauvaise nouvelle !
Cet attribut est classé "Obsolète". En clair :
"Cette propriété est dépréciée et ne doit plus être utilisée"
https://developer.mozilla.org/fr/docs/Web/CSS/clip

L'autre souci est que tu mets les photos en image de fond. Sémantiquement, je ne trouve pas cela très correct.

Autre chose, tu gères les boutons "prev" et "next" même s'il n'y a qu'une image à afficher.
La valeur de délai pour l'intervallomètre est placé dans le html pour éviter de bidouiller le script JS.
Il y a la barre d'espace pour suspendre / relancer le diaporama.

J'ai donc corrigé ton code. Tu as la démo en ligne ici :
https://kazimentou.fr/divers/demos/slider.html
https://kazimentou.fr/divers/demos/slider.css ( feuille de style CSS )
https://pastebin.com/qPGH4YsH ( feuille de style CSS avec coloration syntaxique )

Pour afficher le code source de la page HTML, tapes Ctrl-U dans ton navigateur (Firefox ?)

Petite mise à jour:
on peut cliquer sur le compteur pour stopper / relancer le défilement automatique.
Modifié par bazooka07 (22 Oct 2018 - 09:24)

Ho merci beaucoup pour tes explications ! Je t'avoue que comme ce n'est pas mon code, je ne sais pas du tout si il est correct (mais je me disais aussi que mettre les images en background ce n'était pas tip top)

Pour gérer les boutons prev et next, utiliser la barre d'espace ce n'est pas pratique, car si on ne le sait pas, on laisse le diaporama défiler. du coup si je met autoupdate dans le JS comme tu me l'as dit au début, cela devrait fonctionner ?

En tout cas merci beaucoup d'avoir pris le temps de me répondre

Pour stopper le défilement automatique, tu peux mettre une valeur négative à data-delay dans la balise <ul class="cd-slider" > ou supprimer carrément l'attribut data-delay.
Comme je n'ai testé le balayage sur l'écran tactile, j'ai mis le code concerné en commentaires