Embla-carousel: Resize/Reinit Trigger of Some kind

[iamkevingreen]

I actually see that you're currently tracking a similar request in the react version. https://github.com/davidcetinkaya/embla-carousel-react/issues/10

My issue is comparable, but just in a vanilla environment where I am encountering image load issues not correctly drawing the slideshow/allowing me to access it. However doing a simple browser resize appears to resolve it, so if there were an event on the api where we could refresh the slideshow init (similar to the settimeout fix on flickity for anyone familiar with forcing an update on that slideshow...). I realize in an ideal world we wouldn't need these functions and the slideshows would init perfectly but that isn't the case for me.

I'm getting around this by preloading all my images in the background before mounting the slideshow + a combination of index switching but it's not terribly elegant, it does however work. The usecase is a little harder to replicate because I am also creating multiple slideshows on the page via color variant selects (for an ecom experience)

[davidcetinkaya]

Hi Kevin (@iamkevingreen),

Thank you for opening this issue. If I understand you correctly, what you're looking for is:

embla.changeOptions({})

As described in the docs:

Applies passed options by doing all the necessary calculations and initializing the carousel from scratch.

I understand that it doesn't read well. I'm working on Embla v.3 which will expose a method for this that reads better. I haven't decided the name yet but it will probably be something along this way:

embla.reInit()

// or...

embla.lookForChanges()

But until then you'll have to use the unintuitive embla.changeOptions({}) and pass an empty object to re-init the carousel without actually changing any options.

I'd appreciate feedback if this helps your case or not. Thank you in advance!

Kindly,
David

[iamkevingreen]

@davidcetinkaya I eventually stumbled onto this and it appears to be doing what I need. ✨

[davidcetinkaya]

@iamkevingreen I’m glad It helped. Cheers!

[davidcetinkaya]

This has been released with version 3.

The changeOptions method has been renamed to reInit in Embla v.3 which is a breaking change.

const options = { loop: true }
embla.reInit(options) // The options object is optional and can be left out