Changer le style flickity : utilisez JS pour la modification du style

Question

Je rencontre un problème avec Flickity lors de l'accès aux styles à l'aide de js, en particulier les styles pour les points indicateurs. Je souhaite que les points soient colorés en fonction des couleurs d'un tableau (dans mon projet, il devrait s'agir d'un tableau dynamique, mais il est actuellement statique pour simplifier le scénario de test). Ma fonction fonctionne sur des éléments portant le même nom de classe que les points indicateurs que j'ai mis dans le code HTML sous le carrousel Flickity.

Il s'agit d'un forked (de la documentation Flickity) et de CodePen modifié pour illustrer mon problème :
https://codepen.io/Insa-Deist/pen/jOXNOKM

Merci d'avance pour vos conseils.

Le js que j'ai ajouté devrait être correct, je l'ai essayé sur une autre ligne de points qui ne sont pas dans le conteneur du carrousel Flickity et qui ont le même nom de classe dont parle le js (quand j'ouvre le code source de mon project , le point de repère porte également le même nom de classe).

*Je viens de recevoir un avertissement me demandant de coller le code ici également, je le colle donc ici :

html

<h1>Flickity - freeScroll, wrapAround</h1>

<!-- Initialisation HTML de Flickity -->
<div class="carrousel"
  data-flickity='{ "freeScroll": true, "wrapAround": true }'>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>

<br><br><br>

<p> rangée de points pour afficher la fonction js avec le tableau de couleurs --> PROBLEME : je veux que les points indicateurs du carrousel soient également colorés à partir de ce tableau, pourquoi est-ce que je ne fonctionne pas même s'ils ont également le .dot classe attribuée lorsque j'ouvre le code source de mon projet</p>
<classe div"flickity-page-dots">
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
</div></pré>
<p>css</p>
<pre class="brush:php;toolbar:false;">/* CSS externe : flickity.css */

* { dimensionnement de la boîte : border-box ; }

corps { famille de polices : sans-serif ; }

.carrousel {
  contexte : #FAFAFA ;
}

.carrousel-cellule {
  largeur : 66 % ;
  hauteur : 200px ;
  marge droite : 10 px ;
  arrière-plan : #8C8 ;
  rayon de bordure : 5 px ;
  contre-incrément : cellule carrousel ;
}

/* numéro de téléphone */
.carousel-cell:avant {
  bloc de visualisation;
  alignement du texte : centre ;
  contenu : compteur (cellule carrousel) ;
  hauteur de ligne : 200 px ;
  taille de police : 80 px ;
  Couleur blanche;
}

.point {
    affichage : bloc en ligne ;
    largeur : 10px ;
    hauteur : 10px ;
    marge : 0 8px ;
    rayon de bordure : 50 % ;
    opacité : 1 ;
    curseur : pointeur ;
}
.flickity-page-dots .dot{
  opacité : 1 ;
}
.flickity-page-dots .dot.is-selected {
  -webkit-filter : flou (3px);
  -moz-filter : flou (3px);
  -o-filtre : flou (3px);
  -ms-filter : flou (3px);
  filtre : flou(3px);}

js

// js externe : flickity.pkgd.js
var couleurs = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#FF69B4"];
var personnaliserContainer = Array.from(document.querySelectorAll('.dot'));

personnaliserContainer.forEach(function(node, i) {
    node.style.background = couleurs[i % couleurs.longueur];
});

            

Answer 1

Essayez-le sur codepen :

// 外部js: flickity.pkgd.js
    function changeColor(){
    var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#FF69B4"];
    var customizeContainer = Array.from(document.querySelectorAll('.dot'));
    
    customizeContainer.forEach(function(node, i) {
        node.style.background = colors[i % colors.length];
        console.log(colors[i % colors.length]);
    });
    }
    var flkty = new Flickity( '.carousel', {
      on: {
        ready: function() {
         changeColor();
        }
      }
    });