如何通过JS修改Flickity轮播组件的指示器圆点样式？

问题 #

使用JS从颜色数组取值，为Flickity轮播的指示器圆点设置颜色时，手动添加的.dot元素生效，但Flickity自动生成的轮播指示器圆点不生效。

原因 #

Flickity的指示器圆点是动态生成的，你的JS代码在页面初始加载时就执行了，此时Flickity还未完成初始化、未生成对应的指示器DOM节点，因此document.querySelectorAll('.dot')只能获取到你手动添加的那些圆点，无法捕获Flickity后续生成的节点。

解决方法 #

利用Flickity提供的ready事件，在Flickity完全初始化、DOM节点生成完成后，再执行颜色设置逻辑。

修改后的代码 #

HTML（可保留原结构，若改为JS初始化可移除data-flickity属性）

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

<!-- Flickity HTML init -->
<div class="carousel">
  <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>用于展示JS颜色数组功能的圆点行 --> 问题：我希望轮播的指示器圆点也能从此数组取色，为何明明它们也有.dot类却不生效</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>

JS代码

// external js: flickity.pkgd.js
var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#FF69B4"];

// 初始化Flickity并绑定ready事件
var carousel = new Flickity('.carousel', {
  freeScroll: true,
  wrapAround: true
});

// 当Flickity初始化完成后执行颜色设置
carousel.on('ready', function() {
  // 获取所有.dot元素，包括Flickity生成的
  var allDots = Array.from(document.querySelectorAll('.dot'));
  allDots.forEach(function(node, i) {
    node.style.background = colors[i % colors.length];
  });
});

兼容data-flickity属性初始化的写法

如果坚持用HTML属性初始化Flickity，可通过DOMContentLoaded事件获取实例后绑定逻辑：

document.addEventListener('DOMContentLoaded', function() {
  var carousel = Flickity.data('.carousel');
  carousel.on('ready', function() {
    var allDots = Array.from(document.querySelectorAll('.dot'));
    allDots.forEach(function(node, i) {
      node.style.background = colors[i % colors.length];
    });
  });
});

可选优化 #

若需要在轮播切换时保持颜色与选中状态的样式同步，可添加change事件监听：

carousel.on('change', function() {
  var allDots = Array.from(document.querySelectorAll('.dot'));
  allDots.forEach(function(node, i) {
    node.style.background = colors[i % colors.length];
  });
});

内容的提问来源于stack exchange，提问作者inso1