[Help]: Change main slide when thumbs autoscroll

[coldnanee]

Summary

Hi! I'm using main and thumbs sliders. In thumbs slider use autoplay. How can I change active slide in main slider, when thumb slide was scrolled by autoplay?

thx!

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-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]

Hi @coldnanee,

Thanks for your question. That's possible to achieve. A simple implementation would be:

thumbsCarouselApi.on('select', () => {
  mainCarouselApi.scrollTo(thumbsCarouselApi.selectedScrollSnap())
})

However, you might not want to disturb a user if they're dragging the main carousel by switching slide. So we can check if the pointer is down on the main carousel and only advance it when the pointer isn't down like so:

const mainCarouselPointerDown = useRef(false)

useEffect(() => {
  function setPointerState(api, eventName) {
    mainCarouselPointerDown.current = eventName === 'pointerDown'
  }
  mainCarouselApi
    .on('pointerDown', setPointerState)
    .on('pointerUp', setPointerState)
}, [mainCarouselApi])

useEffect(() => {
  thumbsCarouselApi.on('select', () => {
    if (!mainCarouselPointerDown.current) mainCarouselApi.scrollTo(thumbsCarouselApi.selectedScrollSnap())
  })
}, [mainCarouselApi, thumbsCarouselApi])

I hope it helps.

Best,
David