display none on flickity-slides not working as expected

[neuedeutsche]

display none on flickity-slides doesnt make them none-items. shouldnt this be taken in account?

[desandro]

Thanks for this feature request. Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

---

One way to address this issue is to use cellSelector for the visible cells

<div class="carousel-cell is-visible">...</div>
<div class="carousel-cell is-visible">...</div>
<div class="carousel-cell is-hidden">...</div>
<div class="carousel-cell is-visible">...</div>

$('.carousel').flickity({
  cellSelector: '.carousel-cell.is-visible'
});

[neuedeutsche]

duuuh, yea that actually does not sound stupid 👍 thanks!

[contreforme]

I add that i’d love to see a $('.carousel').flickity('hide_cells',$('.cells_to_hide')) / $('.carousel').flickity('display_cells',$('.cells_to_display'))

[guydrums]

Hi. I would like to know if adding the .is-visible and .is-hidden dynamically still makes the added classes visible to flickity. I dynamically add using $('[data-thumbnail-color],[data-image-color]').removeClass('is-visible').removeClass('is-hidden'); to the list items that respectively need to be hidden or visible; buy when add cellSelector: '.carousel-cell.is-visible'; the carousel disappears.

[haroldao]

Thanks for this feature request. Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

One way to address this issue is to use cellSelector for the visible cells

<div class="carousel-cell is-visible">...</div>
<div class="carousel-cell is-visible">...</div>
<div class="carousel-cell is-hidden">...</div>
<div class="carousel-cell is-visible">...</div>

$('.carousel').flickity({
  cellSelector: '.carousel-cell.is-visible'
});

Perfect!