Flickity-Stil ändern: Verwenden Sie JS zur Stiländerung

Question

Ich habe ein Flickity-Problem beim Zugriff auf Stile mithilfe von js, insbesondere auf Stile für Indikatorpunkte. Ich möchte, dass die Punkte basierend auf den Farben in einem Array eingefärbt werden (in meinem Projekt sollte dies ein dynamisches Array sein, ist aber derzeit statisch, um den Testfall zu vereinfachen). Meine Funktion funktioniert mit Elementen mit demselben Klassennamen wie die Indikatorpunkte, die ich im HTML-Code unter dem Flickity-Karussell eingefügt habe.

Dies ist ein gespaltener (aus der Flickity-Dokumentation) und geänderter CodePen, um mein Problem zu veranschaulichen:
a href="https://codepen.io/Insa-Deist/pen/ jOXNOKM" >https://codepen.io/Insa-Deist/pen/jOXNOKM

Vielen Dank im Voraus für alle Tipps.

Das von mir hinzugefügte js sollte korrekt sein. Ich habe es mit einer anderen Zeile von Punkten versucht, die sich nicht im Flickity-Karussellcontainer befinden und denselben Klassennamen haben, von dem das js spricht (wenn ich den Quellcode meines öffne). project , der Cue-Point hat auch den gleichen Klassennamen).

*Ich habe gerade eine Warnung erhalten, in der ich aufgefordert werde, den Code auch hier einzufügen, also füge ich ihn hier ein:

html

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

<!-- Flickity HTML init -->
<div class="carousel"
  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> Punktreihe zur Anzeige der js-Funktion mit dem Farbarray --> PROBLEM: Ich möchte, dass die Indikatorpunkte aus dem Karussell auch aus diesem Array gefärbt werden. Warum funktioniert das nicht, obwohl sie auch den .dot haben? Klasse zugewiesen, wenn ich den Quellcode meines Projekts öffne</p>
<div class"flickity-page-dots">
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
</div>

css

/* externes CSS: flickity.css */

* { box-sizing: border-box; }

body { Schriftfamilie: serifenlos; }

.karussell {
  Hintergrund: #FAFAFA;
}

.carousel-cell {
  Breite: 66 %;
  Höhe: 200px;
  Rand rechts: 10px;
  Hintergrund: #8C8;
  Randradius: 5px;
  Zählerinkrement: Karussellzelle;
}

/* Handynummer */
.carousel-cell:before {
  Bildschirmsperre;
  Textausrichtung: Mitte;
  Inhalt: counter(carousel-cell);
  Zeilenhöhe: 200px;
  Schriftgröße: 80px;
  Farbe weiß;
}

.dot {
    Anzeige: Inline-Block;
    Breite: 10px;
    Höhe: 10px;
    Rand: 0 8px;
    Randradius: 50 %;
    Deckkraft: 1;
    Cursor: Zeiger;
}
.flickity-page-dots .dot{
  Deckkraft: 1;
}
.flickity-page-dots .dot.is-selected {
  -webkit-filter: Unschärfe(3px);
  -moz-filter: Unschärfe(3px);
  -o-filter: Unschärfe (3px);
  -ms-filter: Unschärfe(3px);
  Filter: Unschärfe(3px);}

js

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

anpassenContainer.forEach(function(node, i) {
    node.style.background = farben[i % farben.länge];
});

Answer 1

在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();
        }
      }
    });