Tukar gaya kejenakaan: gunakan JS untuk pengubahsuaian gaya

Question

Saya menghadapi isu Flickity dengan mengakses gaya menggunakan js, khususnya, gaya untuk titik penunjuk. Saya mahu mata diwarnakan berdasarkan warna dalam tatasusunan (dalam projek saya ini harus menjadi tatasusunan dinamik, tetapi pada masa ini statik untuk memudahkan kes ujian). Fungsi saya berfungsi pada elemen dengan nama kelas yang sama dengan titik penunjuk yang saya letakkan dalam html di bawah karusel Flickity.

Ini adalah forked (dari dokumentasi Flickity) dan menukar CodePen untuk menggambarkan masalah saya:
https://codepen.io/Insa-Deist/pen/jOXNOKM

Terima kasih terlebih dahulu untuk sebarang petua.

Js yang saya tambahkan sepatutnya betul, saya telah mencubanya pada baris titik lain yang tiada dalam bekas karusel Flickity dan mempunyai nama kelas yang sama yang dibicarakan oleh js (apabila saya membuka kod sumber saya project , titik isyarat juga mempunyai nama kelas yang sama).

*Baru sahaja mendapat amaran yang meminta saya menampal kod di sini juga, jadi saya menampalnya di sini:

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> baris titik untuk menunjukkan fungsi js dengan tatasusunan warna --> kelas yang diberikan apabila saya membuka kod sumber projek saya</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></pra>
<p>css</p>
<pre class="brush:php;toolbar:false;">/* css luaran: flickity.css */

* { saiz kotak: kotak sempadan; }

badan { font-family: sans-serif; }

.carousel {
  latar belakang: #FAFAFA;
}

.carousel-cell {
  lebar: 66%;
  ketinggian: 200px;
  jidar kanan: 10px;
  latar belakang: #8C8;
  jejari sempadan: 5px;
  kenaikan balas: sel karusel;
}

/* nombor sel */
.carousel-cell:sebelum {
  paparan: blok;
  text-align: tengah;
  kandungan: kaunter(sel karusel);
  ketinggian garis: 200px;
  saiz fon: 80px;
  warna: putih;
}

.dot {
    paparan: inline-block;
    lebar: 10px;
    ketinggian: 10px;
    jidar: 0 8px;
    jejari sempadan: 50%;
    kelegapan: 1;
    kursor: penunjuk;
}
.flickity-page-dots .dot{
  kelegapan: 1;
}
.flickity-page-dots .dot.is-selected {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-penapis: blur(3px);
  -ms-filter: blur(3px);
  penapis: blur(3px);}

js

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

customizeContainer.forEach(fungsi(nod, i) {
    node.style.background = warna[i % warna.panjang];
});

Answer 1

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