Only works after a screen refresh (Vue framework) about embla-carousel

[xoumi]

Thanks for the quick reply !
And sorry for the late reply.
I'm just a beginner in the field of web development so I probably cannot go around writing generic use case modular wrappers but I can provide some insight on how it weirdly got fixed:
I went through the docs again and noticed the position: relative css on .embla__slide elements.
Even though I've set the loop property of embla to false, I needed the position: relative to make it work.
Weird interaction I must say, plus the fact that it magically does work if the window is resized.

Anyhoo, I'll close the issue, good luck with getting a vue wrapper going, I'm sure many would benefit from it.

[davidjerleke]

Hello @xoumi,
Thank you for opening this issue 👍.

It's a bit hard to troubleshoot without any code at hand, but I'm guessing that it has something to do with when:

EmblaCarousel(elementNode, options);

...is called 🤔. It could have something to do with how front-end frameworks/libraries abstract the vanilla JavaScript away (in this case Vue) and offer component lifecycle methods instead, like a mount hook when a component has mounted. Maybe you need to hook on to a mounted() method or similar before initialising Embla? I don't think this is an issue related to Vue itself, but I may be wrong.

For example, to make Embla compatible with React, I had to build a tiny wrapper-component. It utilises React component methods and enables React users to use Embla in their projects.

Now I know you're using Vue, so my point being is that we may need to build a Vue wrapper component to make Embla compatible with Vue. I'd be very happy if this issue leads to me being able to add a link to the Embla Carousel Vue package here 😃:

Unfortunately I'm not so familiar with Vue so I'd be very happy if someone could help me out with this. Maybe the Vue Flickity package code can be used as inspiration?

What do you think, does this make sense?

[davidjerleke]

Hi again @xoumi,

I've setup a working CodeSandbox example for you. It works on initialisation and doesn't need a resize in order to work correctly.

Try it out if you like 👍!

Just a disclaimer: I write code in Vanilla JS and React on a daily basis so I don't feel comfy with Vue. I can't guarantee that the example I've setup for you follows any Vue best practices 😅.

[davidjerleke]

Building a Vue wrapper for Embla issue has been opened here #17.

[davidjerleke]

Hi @xoumi,

Just wanted to let you know that a Vue 3 Embla package is available now.

Read more here.

Cheers,
David

[vinisooo]

having the same issue on NextJS13. Adding position: relative to .embla__slide didn't work to me :(

[davidjerleke]

@vinisooo what version of Embla are you using?

[vinisooo]

Hello @davidjerleke !
The problem has already been solved.

I discovered that it was happening due to the animation I put on the page:

@keyframes page-show-up
    from
        opacity: 0
        transform: scale(0.8)
    to
        opacity: 1
        transform: translateY(0) scale(1)
        

For some reason, the transforrm: scale was breaking the carousel CSS, until I refreshed the page or resized it. So I kinda radically solved it by removing the animation.

by the way, these are the versions I am currently using:

  "embla-carousel-autoplay": "^8.0.0-rc07",
  "embla-carousel-react": "^8.0.0-rc07",

[davidjerleke]

Hi @vinisooo,

That’s happening because transform scale alters element dimensions. And upon initialization, Embla has to read container and slide dimensions in order to calculate scroll positions correctly. If you want to apply scale on your slides you will have to wait until Embla has initialized.

Best,
David