[Help]: Change snap points when using scrollTo method

[AndrewPJohnson]

Summary

I have a horizontal calendar carousel I just built using embla. When a user clicks on a calendar item I scroll it to the start of the carousel. The only way I can get that to work is by enabling dragFree. The problem is I like the animation when slidesToScroll is set to auto and dragFree is disabled (looks better in mobile browsers). When I set that to auto, the scrollTo method doesn't work like it does when dragFree is enabled. It scrolls to the nearest snap point using the number of slides to scroll instead of scrolling right to the clicked item.

I added a few examples in the CodeSandbox of what is happening to clear confusion.

So is there a way to accomplish sliding an item to the start while also using slidesToScroll set to auto? My thoughts are disabling slidesToScroll and then enabling it after the scroll finishes. Or somehow changing the snap points.

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

CodeSandbox

[davidjerleke]

Hi @AndrewPJohnson,

I'm a bit confused. What should happen when you click on a slide? Should the carousel scroll to the snap point that slide belongs to?

[davidjerleke]

@AndrewPJohnson I will delete this issue if you don't answer soon.

[AndrewPJohnson]

I think it should scroll to the slide and update the snap points to now place that slide at the beginning, but maybe that's an unusual behavior.

[davidjerleke]

@AndrewPJohnson the behaviour you suggest would raise a lot of questions:

• How should canScrollNext() and canScrollPrev() work? Should they take snaps or slides into account?
• How should scrollNext() and scrollPrev work? Should it scroll to the next slide or snap?

As far as I see, if you set slidesToScroll to auto, you want slides to be grouped. It would get quite messy to eat the cake and have it too. However, if you just want to scroll to the snap that holds the slide you want to show, you can do this:

function scrollToSnapBySlideIndex(slideIndex) {
  const { slideRegistry } = emblaApi.internalEngine();
  const snapIndex = slideRegistry.findIndex((snap) => snap.includes(slideIndex));

  if (typeof snapIndex === 'number') emblaApi.scrollTo(snapIndex);
}