CODEWITHSUNDEEP
javascriptcssarrayscarouselflickity
inso1
inso1

Reputation: 1

changing flickity styling through js

I have a flickity Issue with accessing the styling, in my case, of the indicator dots, through js. I want the dots to be colored from an array (in my project it should be a dynamic array but for the reduced test case its static for now) my function works on elements with the same class name as the indicator dots that I've put in the html below the flickity carousel.

Here is the forked (from the flickity docs) and changed codepen to illustrate my problem: https://codepen.io/Insa-Deist/pen/jOXNOKM Thank you in advance for any tips

the js I added should be correct, I've tried it on a different row of dots that are not in the flickity carousel container but have the same class that the js is speaking to (and that the indicator dots have when I open the sourcecode of my project)

*just got an alert that I should paste the code also in here so here it goes:

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> 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</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

/* 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];
});

Upvotes: 0

Views: 411

Answers (1)

Ashish
Ashish

Reputation: 182

Try this on codepen:

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

Upvotes: 0

Related Questions