Scroll to slide based on id not index

[SidNewman]

Hi there,

Is it possible to use the scrollTo() method to go to a slide by its id or custom data attribute as apposed to its index position?

Essentially I have a drop down variant selector for a few products on a project of mine, and when clicked - the value on the selected option would match a slide ID and then scroll to that slide.

Hopefully that makes sense

TIA

[davidjerleke]

Hi @SidNewman,

What version of Embla are you using?

[davidjerleke]

Hi @SidNewman,

Thanks. Start with upgrading to 8.0.0-rc12.

If I'm understanding you correctly, what you want to do in your case is to map data-attribute --> slide index --> scroll snap index before using scrollTo(). Because scroll snaps are masters over slides because one snap can "own" multiple slides and not the other way around.

If possible, I would add data-attributes directly to your slide elements, meaning the direct descendants of the Embla container:

<div class="embla">
  <div class="embla__container">

    <div class="embla__slide" /* data-attribute here */>
      ...slide 1 content here
    </div>

    ...more slides here
  </div>
</div>

If that's possible for you, you can continue doing this:

function scrollToByElement(slideElement) {
  const slideIndex = emblaApi.slideNodes().indexOf(slideElement)
  const { slideRegistry } = emblaApi.internalEngine();
  const snapIndex = slideRegistry.findIndex((group) => group.includes(slideIndex));

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

// Get your slide element based on the data-attribute here. Then:
scrollToByElement(slideElement)

Best,
David

[SidNewman]

Thanks for this!

I also came up with the following which seems to be working too:

  function findImageIndex(id, jump) {
    document.querySelectorAll('.embla-pdp__viewport .embla__slide').forEach((s,i)=>{
      let vid = s.getAttribute('data-variant-id');
      if(id == vid){
        emblaApiMain.scrollTo(i, jump);
        return i;
      }
    })
  }

[davidjerleke]

Hi @SidNewman,

Yes, that will work but not in all cases. As soon as you use the slidesToScroll option or have containScroll enabled, and also have more than one slide that fits into the viewport your solution will not work. The solution I provided is bulletproof regardless of setup.

Best,
David

[davidjerleke]

@SidNewman I'm closing this as resolved?

[SidNewman]

@davidjerleke Thnaks so much!

this can now be closed

Also I am migrating to this package from swiper on all my projects 🎉