I'm running into a Flickity issue with accessing styles using js, specifically, styles for indicator points. I want the points to be colored based on the colors in an array (in my project this should be a dynamic array, but is currently static to simplify the test case). My function works on elements with the same class name as the indicator points I put in the html below the Flickity carousel.

This is a forked (from the Flickity documentation) and changed CodePen to illustrate my problem:
https://codepen.io/Insa-Deist/pen/jOXNOKM

Thanks in advance for any tips.

The js I added should be correct, I have tried it on another line of points that are not in the Flickity carousel container and have the same class name that the js is speaking of (when I open the source code of my project , the cue point also has the same class name).

*Just got a warning asking me to paste the code here too, so I’m pasting it here:

html

Flickity - freeScroll, wrapAround
  
 
 
 
 
 
 
 


 
 row of dots to show the js function with the color array --> ISSUE: i want the indicator dots from the carousel also be colored from that array, why is i not working even though they also have the .dot class assigned when I open the sourcecode of my project
 
 
 
 
 
 
 

css

/* external css: flickity.css */ * { box-sizing: border-box; } body { font-family: sans-serif; } .carousel { background: #FAFAFA; } .carousel-cell { width: 66%; height: 200px; margin-right: 10px; background: #8C8; border-radius: 5px; counter-increment: carousel-cell; } /* cell number */ .carousel-cell:before { display: block; text-align: center; content: counter(carousel-cell); line-height: 200px; font-size: 80px; color: white; } .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; border-radius: 50%; opacity: 1; cursor: pointer; } .flickity-page-dots .dot{ opacity: 1; } .flickity-page-dots .dot.is-selected { -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px);}

js

// external js: flickity.pkgd.js 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]; });