Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

[Help]: Is it possible to change slide widths + scale when swiping?#978

Unanswered
keithengg asked this question inHelp
Discussion options

Summary

Screenshot 2024-08-17 at 5 25 34 PM

I am trying to achieve something like this where 2 slides off to the side takes up equal widths while the center "active" slide is bigger.

I followed the "Scale" example which works great but sadly trying to apply the same technique for changing slide size causes the Carousel to break. Anyone has some suggestions on workarounds?

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

You must be logged in to vote

Replies: 3 comments

Comment options

@keithengg did you ever find out a solution?

I've never done this effect, but I have a hacky suggestion. I've once used anopacity: 0 carousel in the background that would capture drag information. Then in the foreground had markup that controlled a non standard looking carousel (it was a wheel of content), and passed position data between the two, but it was a lot of effort as it required hooking into the internal engine.

You must be logged in to vote
0 replies
Comment options

@davidjerleke. I am also stuck on this issue.

@keithengg Did you find a solution?

When scrolling I want the center image to grow in width smoothly. Changing the flex: 0 0 value; breaks the carousel

You must be logged in to vote
0 replies
Comment options

@keithengg,@Joobs,@tayteboss — adjusting slide sizes while the carousel is animating will reset the carousel. This kind of change isn't supported while the carousel is animating, as any ongoing animation will be interrupted and the carousel will reset. A workaround could be to usetransform: scale instead. It may or may not work for your use case.

However, you candisable the internal resize logic (which triggers the reset) and implement your own instead. That way, you have full control over when the resize should be triggered—allowing you to avoid it when slide sizes change during transitions:

const[emblaRef,emblaApi]=useEmblaCarousel({watchResize:false,})

Just keep in mind that the internal resize logic callsemblaApi.reInit() when sizes change, which is good to know if you're writing your own resize handling.

You must be logged in to vote
0 replies
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Help
Labels
questionQuestion about how to achieve something
4 participants
@keithengg@Joobs@davidjerleke@tayteboss

[8]ページ先頭

©2009-2025 Movatter.jp