javascriptshopifyflickity

Flickity doesn't always load (Shopify)

I am using flickity to make carousels in my Shopify store. An odd thing happens when it sometimes does not load. It happens sometimes, not always. I could not find anything in the console to help understand why this is happening. Refreshing the page usually gives the correct result

Things I've already tried:

  1. Using only 1 of the 2 Flickity components, still doesn't work
  2. Hosting the css and js files on Shopify's servers vs. unpkg.com (where it is normally hosted)

Website: https://4s6snnbh0sbvzjnb-5771952162.shopifypreview.com

What sometimes happens: enter image description here enter image description here

Intended Result (happens after you refresh): enter image description here enter image description here

Solution

  • There are some situations where the slider is not working properly due to some JS conflicts or content loading issues like slow-loading images. there is a small trick that triggers the Flickity slider to work.

    // trigger a resize event once the window is loaded, it refresh the Flickity slider on resize
window.onload = function(){
    window.dispatchEvent(new Event('resize'));
}

    When the window is resized slider recalculate it with and slide to show etc, so if there is an issue that causes random failure of the slider.

    Then we generate a javascript code resize event, and the slider works perfectly.