Re: Broken Image in Flickity Carousel

Solved

Why does the 5th image break in my Flickity carousel?

SarahM72
Shopify Partner
3 0 0

I'm using a customized version of Dawn that includes a Flickity carousel for product images. Anytime I add more than 4 images, the 5th image appears as broken until the carousel is engaged with (either swiping or clicking the arrow on the main image). 

Here's a screenshot:

 

SarahStenz_0-1673556640737.png

I've searched but haven't found any solutions. Any advice on how to fix? TIA!

Accepted Solution (1)

EBOOST
Shopify Partner
1038 276 314

This is an accepted solution.

Hi @SarahM72 

May I suggest you remove loading="lazy" after that use layzload of Flickity 

https://flickity.metafizzy.co/options.html#lazyload

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

View solution in original post

Replies 2 (2)

EBOOST
Shopify Partner
1038 276 314

This is an accepted solution.

Hi @SarahM72 

May I suggest you remove loading="lazy" after that use layzload of Flickity 

https://flickity.metafizzy.co/options.html#lazyload

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
SarahM72
Shopify Partner
3 0 0

Thank you so much!!

 

The code was already using Flickity lazyload, but I didn't know how to change the number of images loaded. I found it, thanks to you and it worked perfectly 🙂