is-selected class in flickity can't detected in javascript

Question

I'm creating slider using flickity and what I'm trying to do is when slide is selected the background color of body change (each slide has a specific color.. the problem is (is-selected) class can't detected in JavaScript even though I clearly see it in console

html:

<div class="carousel" data-flickity='{ "wrapAround": true }'>
                <div class="carousel-cell" data-color="red">
                    <img class="pic" src="./img/1.jpeg" alt="">

                </div>
                <div class="carousel-cell" data-color="blue">
                    <img class="pic" src="./img/2.jpeg" alt=""

                </div>
                <div class="carousel-cell" data-color="green">
                    <img class="pic" src="./img/3.jpeg" alt="">
                </div>

            </div>

let cell = document.querySelectorAll(".carousel-cell");
cell.forEach((c) => {
 // console.log(c.dataset.color);
  if (c.classList.contains("is-selected")) {
    document.body.style.backgroundColor = "red";
  }
});

how can I solve this?

Answer 1

You might tweak Flickity itself like I do in the snippet below, or if you'd like to keep it clean, you want to use mutationObserver.

const selectFn = [
  'var a = fizzyUIUtils;',
  (Flickity.prototype.select + '').substring(16).replace(/}$/, ';'),
  'document.body.style.backgroundColor = this.cells.find(c => c.element.classList.contains("is-selected")).element.dataset.color;'
].join('');
Flickity.prototype.select = new Function('t', 'e', 'i', selectFn);

.carousel {
  height: 80vh;
  width: 80vw;
  margin: 10vh 0 0 10vw
}

.carousel-cell,
.pic {
  height: 100%;
  width: 100%;
}

.pic {
  object-fit: contain
}

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>



<div class="carousel" data-flickity='{ "wrapAround": true }'>
  <div class="carousel-cell" data-color="red">
    <img class="pic" src="https://picsum.photos/id/21/400/300" alt="">
  </div>
  <div class="carousel-cell" data-color="blue">
    <img class="pic" src="https://picsum.photos/id/16/400/300" alt="">
  </div>
  <div class="carousel-cell" data-color="green">
    <img class="pic" src="https://picsum.photos/id/28/400/300" alt="">
  </div>

</div>