Slick – Exécution de code

J’utilise le cadre lisse qui me permet d’avoir un carrousel.

Le problème est que sur la deuxième page de mon carrousel, il y a un effet CSS qui commence. (code ci-dessous)

Le problème est que l’effet css commence à l’ouverture du site. Alors quand je fais défiler la

caroussel l’effet est déjà “passé”. Je veux que l’effet commence après avoir cliqué sur l’un des deux

flèches (droite et gauche).

J’ai importé le framework slick via url et vu que le code du bouton est activé

une des URL donc je modifie moi-même le bouton dans mon code (javascript).

Après cela, rien ne se passe.

Je ne comprends pas !

Dans l’attente d’une réponse de votre part pour mes deux problèmes.

Cordialement.

/*(function() { var slideContainer = $('.slide-container'); slideContainer.slick({ //id added to execute the function below //https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js //In this url you can see that prevArrow and nextArrow are the buttons prevArrow: '', nextArrow: '', }); $("#prev, #nex").click(function() { $(".expand").addClass("myeffect2"); }); */ $(".slide-container").slick({ });

 body { background-color: black; color: #9E9E9E; } .slide-container { margin: auto; width: 600px; text-align: center; } .wrapper { padding-top: 100px; padding-bottom: 40px; } .wrapper:focus { outline: 0; } .card { background: white; width: 300px; display: inline-block; margin: auto; border-radius: 19px; position: relative; text-align: center; -webkit-box-shadow: -1px 15px 30px -12px black; box-shadow: -1px 15px 30px -12px black; } /***** Effect *****/ .expand-bg { background: none repeat scroll 0 0 #e6e6e6; border-radius:16px; height: 16px; margin-bottom: 5px; } .expand { border-radius: 13px; height: 12px; margin: 2px; position: absolute; } .myeffect2 { width:90%; background:#000000; -moz-animation:myeffect 8s ease-out; -webkit-animation:myeffect 8s ease-out; } @-moz-keyframes myeffect2 { 0% { width:0px; } 100% { width:90%; } } @-webkit-keyframes myeffect { 0% { width:0px; } 100% { width:90%; } }

     Test            My name
 
 
 
     <div class="card__unit-name"
 
 My effect

Portée de la classe myeffect2 ou de toute classe avec une animation que vous ne souhaitez pas exécuter sauf si la diapositive est active pour la classe active.

Slick ajoute la classe “active” aux diapositives visibles.

 .slick-active .myeffect2 { width:90%; background:#000000; -moz-animation:myeffect 8s ease-out; -webkit-animation:myeffect 8s ease-out; }