[Help]: Auto Scroll plugin interaction container

[Cchumi]

Summary

Hi first of all thanks for your carrousel and plugins it works very well great job.

I want to archivée a functionality.
I use autoscroll plugin and it works fine.
hover on main container stop the autoscroll which is good.
but I need to pause the carousel not on the entire container but just on left and right side.

How I could achieve that ?
I tried root node but it doesn’t have the good effect.

Any help or advice make me very happy.

Thanks a lot.

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]

Hi @Cchumi,

Thanks for your question. Could you please clarify - do you want the autoscroll to pause only when hovering over the left and right edges/sides of the carousel—not the whole thing?

[Cchumi]

Hi thanks for your answer.

Instead on pausing on the entire container on hover I just want to pause when my mouse hover left or right side of the container (example : 100px left full container height.) if I hover this part of the container it will pause the carousel. If I hover the center of the container it will not pause.

I really appreciate your quick answer.
Sorry I am French if my English is a little dirty

:)

[davidjerleke]

Hi @Cchumi,
No worries—your English is totally fine, and your explanation is clear.

To get the behavior you want (pausing only when hovering over the left or right side of the carousel), here’s how you can do it:

1. Set stopOnMouseEnter: false in the Autoscroll plugin options. This will disable the default behavior of the plugin:
   AutoScroll Plugin Options

2. Add your own custom hover logic. You have two main options for detecting when to pause:

   • Option A: Add transparent or visible elements to the left and right sides of the carousel. Attach mouseenter and mouseleave events to those elements.
   • Option B: Listen to mouseenter and mousemove events on the entire container, and calculate the mouse position. If the X coordinate is within the left or right 100px of the container, then pause.

3. Use the Embla API to control autoscroll:

   • emblaApi.plugins().autoScroll.stop() → to pause
   • emblaApi.plugins().autoScroll.play() → to resume

[Cchumi]

Hooooo thank you for pointing me on this direction.
I will take a look tomorrow and give you feedback.

Thanks a lot

Great job you rock

[Cchumi]

Hi your rock.
I just did option 1 and it works great.
Good job.

Thanks a lot again

Have a good day

Pierre

[davidjerleke]

@Cchumi thanks for confirming - have a great day!