[Feat]: Scroll to snap that holds a specific slide

[MaxDesignFR]

Summary

I've been through the methods but unless I missread something it seems we can't actually get the snap point index for any given slide.

Let's say I have 15 slides and I want to scroll to the 5th slide (index 4). I can't do embla.scrollTo(4) because for all I know the 5th slide may not be at the index 4 snap point (I could have some snap points with 3 slides in view, others with more or less).

It sounds so basic to be able to scroll to a given slide, so am I just missing something?

I dig into embla.internalEngine().slideRegistry and I guess I could use that to map my slide index to the snap point index, but I really feel like this should be supported natively, for instance scrollTo method could either support an integer or a slideNode element.

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

• PR: [Feat]: Scroll to snap that holds a specific slide #1086.

CodeSandbox example

No response

[davidjerleke]

Hi @MaxDesignFR,

Thanks for your question. I think your suggestion makes sense 👍, so we should add something along these lines:

scrollToSlide(subject: number | HTMLElement, jump?: boolean): void {
  const index = isNumber(subject) ? subject : slides.indexOf(subject)
  const group = slideRegistry.findIndex((group) => group.includes(index))

  if (isNumber(group)) scrollTo.index(group, jump)
}

[MaxDesignFR]

Hi David!

Yes that sounds right. I think this would be a great addition with seemingly little extra code.

If this is an additional method and not one to replace the original scrollTo, then I wonder for naming conventions if scrollTo should be renamed scrollToSnap, which is less confuse in my mind what it does and also goes along the other methods name such as selectedScrollSnap.

[davidjerleke]

@MaxDesignFR if you want to be able to scroll to a slide by both HTML node and index, it should be a separate method because the current scrollTo() takes an index parameter that's the index of the snap group, not the slide.

What's your thoughts about this?

[MaxDesignFR]

Yes totally agree. I did not thought this through in my OP. So a separate method would be the way to go as you suggested. And that's also why I'd consider renaming scrollTo to scrollToSnap.

Or scrollTo should get a third optional parameter, something like:

scrollTo(number, jump?, 'snap')
scrollTo(number, jump?, 'slide')
scrollTo(HTMLElement, jump?, 'slide')

which could default to 'snap', so in effect the method will keep working just the same as before, but passing 'slide' means that the index will be the slide index instead of the snap point index. Not sure if that's better or worse than having 2 methods, and it also means that user input errors should be handled, for instance if an HTMLElement is passed, this should default to 'slide' instead of 'snap': scrollTo(HTMLElement, jump?, 'snap'). I'm not saying it's a good approach, but it might give you some ideas who knows ;).

[davidjerleke]

@MaxDesignFR thanks for your ideas. I think your suggestion about renaming the existingscrollTo method makes sense. However, renaming it is a breaking change so that will have to wait until the next major version. I've added this to the roadmap.

• [Feat]: ⭐ Roadmap #841

[davidjerleke]

This will be included in v9:

• PR: [Feat]: Scroll to snap that holds a specific slide #1086.