Scroll to a certain slide

[7josenox]

Hi,

I'm using embla-carousel to create a slider for a contact list. Each page can display multiple slides and the user can click on a contact to make it active, which is then saved to storage. Upon returning to the page, I want the system to automatically scroll to the page that the active contact belongs to. However, since the number of slides per page is dynamic based on the user's screen dimensions, I'm unsure of the scroll snap index required for embla's scrollTo method.

Here's the code example

<div className="embla">
  <div className="embla__viewport" ref={emblaRef}>
    <div className="embla__container">
      {slides.map((index) => (
        <div className="embla__slide" key={index}>
          <img
            className="embla__slide__img"
            src={imageByIndex(index)}
            alt="Your alt text"
          />
        </div>
      ))}
    </div>
  </div>
</div>

css style for embla slide
.embla__slide { flex: 0 0 var(400px); }

My question is, Is it possible with the current version of embla-carousel to scroll to a certain slide, for example, I want to scroll to the page where slide with index 5 belongs to?

[davidjerleke]

Hi @7josenox,

Thanks for your question. At the time of writing there's no API method that achieves this. But it's a good point, it would be nice to implement something that solves this. The first step would be to expose which slides that belong to what group. This functionality is also needed to implement these two features:

• [Feat]: Add a fade plugin #39
• Adding a class only to the snapped slide #374

Can't promise when I get time to work on this though as I have a lot on my to do list.

Best,
David

[7josenox]

Thanks for your answer.

[davidjerleke]

Hi @7josenox,

With the release of v8.0.0-rc12, it's now possible to achieve what you want. This is how you do it:

const slideIndexToFind = 3; // The slide you want to find
const { slideRegistry } = emblaApi.internalEngine();
const snapIndexThatSlideBelongsTo = slideRegistry.findIndex((group) => group.includes(slideIndexToFind));

if (typeof snapIndexThatSlideBelongsTo !== 'undefined') {
  emblaApi.scrollTo(snapIndexThatSlideBelongsTo);
}

Let me know if it helps!

Best,
David

[7josenox]

I appreciate that. Thanks.