[Help]: Change slide size after click

[coldnanee]

Summary

Hi! I wanna to create this slider:

I add default slide styles: flex: 0 0 100%, if slide unactive : flex: 0 0 20%, if active: flex: 0 0 40%;

this is my slider options:

{
	loop: true,
	containScroll: 'keepSnaps',
	skipSnaps: false,
	align: 'start',
	watchDrag: false
}

and I got strange problem: when I am click on slide (making it active), loop and align options become disabled and slider starting to behave strangely :c

what am I doing wrong?

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-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

@coldnanee thanks for your question. Please create a minimal CodeSandbox that reproduces the problem. I can't debug fragments of code and sccreenshots. Thanks!

[davidjerleke]

@coldnanee do you want to pursue this?

[coldnanee]

@davidjerleke, no, I solved my problem differently. thx for your time

[linkb15]

@coldnanee How do you solve it?

I did have similar use case here, but the animation on the last card seems glitching, like it expand first then scroll to focus, I am not able to figure how to scroll at the same time it expanded to make it smoother animation