Flickity Slider remove cell by child class

Question

Trying to remove carousel cells if they contain a child element with a specific class, but can't figure out how to do it with the Remove API from flickity.

Using jquery mehtods, I can remove from the DOM just fine, but the navigation of flickity slider still shows the element as present. Also, removed element shows blank space until window resize... just feels jumpy. Any ideas for a novice javascript developer? What am I missing here?

Flickity Slider (Remove API): https://flickity.metafizzy.co/api.html#remove

Codepen: https://codepen.io/alyssabutler/pen/WMGYMe

// external js: flickity.pkgd.js

var $carousel = $('.carousel').flickity({
  // options //
});

window.addEventListener("load", function() {
  $(".carousel-cell:has('.empty')").detach(".carousel-cell");  
  console.log("All resources finished loading!");
  });

score 1 · Accepted Answer · answered Feb 07 '18 at 05:36

Have the code to call the carousel inside the load event, After the element has been removed. i.e.., like below

window.addEventListener("load", function(){                     
     $(".carousel-cell:has('.empty')").detach(".carousel-cell");  
     console.log("All resources finished loading!");                      
     var $carousel = $('.carousel').flickity({                                                                                                       
     // options //                    
     });  
});

Flickity Slider remove cell by child class

1 Answers1