[Help]: Opacity effect with slidesToScroll: 1 but two slides visible

[tobimori]

Summary

I've been trying for a while now, but I'm stuck at this point. I want the effect from the included CodeSandbox, (two slides visible at a time, others are hidden) but with slidesToScroll: 1 instead of 2.

Any hint on what value to modify so this works?

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

https://codesandbox.io/s/embla-carousel-opacity-vanilla-forked-lt2zs7?file=/src/js/index.ts

[davidjerleke]

Hi @tobimori,
With the current setup it's hard to achieve because it's based on the scroll progress in relation scroll snaps (not individual slides). I think what you want to achieve needs a different approach so maybe starting from scratch would be preferable.

[davidjerleke]

@tobimori unfortunately I'm not following. Is it possible for you to describe it more in detail? Maybe with images or something else that could help clarify what you want to achieve.

[tobimori]

This codesandbox now has the behaviour I want, but with a sudden change (since it uses the select event, no scrollProgress etc.)

https://codesandbox.io/s/embla-carousel-opacity-vanilla-forked-lt2zs7?file=/index.html

I want it to be a smooth transition, similar to the original opacity example.

[tobimori]

Sorry for the reminder, were you able to take a look at it? @davidjerleke

[davidjerleke]

@tobimori no worries about the reminder. Thanks for supporting this project. Unfortunately, I have a very busy period in my life so I barely have any spare time at all.

[tobimori]

totally understandable, i'll try to find a different solution for this for now.