[Help]: Vertical Embla in Vuejs does not respect 'align' and 'containScroll' options

[papinto]

Summary

Hello,

I've set up a Vertical scroll carousel using the 'embla-carousel-vue' module, with several slides in view and it works great for the most part, except for the align and containsScroll options.

The carousel behaves as if align is set to 'start' and containsScroll is set to 'keepSnaps', regardless of what value I put into these options, or not putting any value, they don't have any effect on the carousel.

I'd like to know how can I troubleshoot this, if possible, or what other things could be affecting this behavior, say for example if I had a parent container with some particular style set, and that is known to break these 2 options.

Any help appreciated,
Thanks

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

@papinto thanks for your question. I can't help you at all if you don't share a CodeSandbox or StackBlitz with your setup. It could be literally anything in your setup causing the problems you describe. And it would be good if you could share an example of what you want to achieve. For example, a link to an example from a different carousel library.

Let me know if you intend to provide more information.

[papinto]

Thanks for the quick reply @davidjerleke
I set something up here: Vertical Embla Issue

Although it's not exactly what I have as I'm using VueJs, and the carousel doesn't really move atm, so it might not be the same issue as I have, but I reproduced as much of my code as I can.

The main differences are:

• I added 5 slides to the initial 5
• I changed the following css vars to these values:
  --slide-height: 200px;
  --slide-spacing: 10px;
  --slide-size: 20%;
• I added a couple more css to the embla node
  cursor: grab;
  user-select: none;
• I had to comment out the min-height: 0; in the embla-slide otherwise the slides would overlap with each other
• added startIndex:4 to the initial options

[sarussss]

@papinto Can not access link.

[papinto]

Thanks for trying @sarussss .
I have uploaded the source code to this Github public repo Embla Test Github
For IDX it looks like I need your email to be able to share the workspace. Feel free to DM me if you'd like, or maybe the github code will be enough.

To be clear, the main problem I see is in the vertical carousel, when you scroll all the way down, I still see a lot of space at the end.

Here's the carousel before scrolling down:

Here's the carousel fully scrolled to the bottom. I wouldn't expect to see the empty space at the bottom, just as on the horizontal carousel there is no space to the right.

Also, in both the horizontal and vertical versions, when you click on a slide they always align to the start, not the center or end even when I set the align option.

[davidjerleke]

@papinto the Embla scroll snap positioning has solid tests so this is unlikely a bug. Have you tried the carousel generator? You should be able to configure what you want there and compare it to your current CSS setup.

[papinto]

Yes, that's exactly how I started. I generated a vertical carousel using the generator link, and made just a few changes to fit my use case:
I wanted a vertical carousel that showed 4 or 5 slides (instead of 1 at a time), so I just extended the viewport to be a bit over 4 times bigger than a slide, I then added a few more slides (for a total of 10) and changed the size of the slides to use px instead of rem, although I've since changes it back to rem and that didn't make a difference.

I totally accept that this might be an issue with my code, but I've tried tweaking every css variable and even commenting them out, and although I get different results, I can't figure out how to fix the issues.
That's why I asked initially if there was a way that I could troubleshoot this myself, maybe there's some debug information I could look at, or something else that I could try.

I thin the code in the github repo reproduces the issue quite well.
Thanks for the help so far, I understand if you can't help any further.

[sarussss]

Hi @papinto You can check it