[Help]: How to add classes to previous and next slides in loop mode?

[Filip1139]

Summary

I use a plugin to handle classNames with loop mode. However, I have a problem to catch all slides with the slide before 'is-snapped' and the slides after 'is-snapped'. For example, the slides that are before should be with the class 'is-previous-slide' and the next ones 'is-next-slide'. Has anyone needed this solution before?

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

No response

CodeSandbox example

No response

[davidjerleke]

Hi @Filip1139,

Thanks for your question. Please clarify what you want to achieve. Do you want to track the slides that were snapped one step before? Example:

1. Slide 1 is snapped.
2. User navigates to slide 2.
3. Now slide 1 is previous snapped and slide 2 is snapped.

If not, please try to share a visual demonstration or similar that would help to clarify what you want to achieve.

[Filip1139]

Ok, @davidjerleke I have prepared a small demo:

https ://codesandbox.io/p/sandbox/embla-carousel-slides-to-scroll-vanilla-forked-wgjjk2?

In this case, I would like to have the following:

1. is-previous-slide for slides [9,10]
2. is-snapped for the slide that fits perfectly [1,2]
3. is-next-slide for slides [3, 4]

I tried to do something with emblaApi.slidesInView();, but I'm having a little trouble getting it to properly detect the previous and next slides in loop mode.

[davidjerleke]

@Filip1139 care to share the reason why you closed this discussion?

[Filip1139]

I achieve what I need by using this code:

  embla.on('select', () => handleSlideExtraClassnames(embla))

  function handleSlideExtraClassnames(emblaApi) {
    const engine = emblaApi.internalEngine();
    const activeSnapIndex = emblaApi.selectedScrollSnap();
    const lastIndex = engine.slideRegistry.length - 1;

    const previousSnapSlides =
      activeSnapIndex === 0 ? engine.slideRegistry[lastIndex] : engine.slideRegistry[activeSnapIndex - 1];

    const nextSnapSlides =
      activeSnapIndex === lastIndex ? engine.slideRegistry[0] : engine.slideRegistry[activeSnapIndex + 1];

    emblaApi.slideNodes().forEach((slide, index) => {
      slide.classList.remove('is-slide-prev', 'is-slide-next');
      if (previousSnapSlides.includes(index)) {
        slide.classList.add('is-slide-prev');
      } else if (nextSnapSlides.includes(index)) {
        slide.classList.add('is-slide-next');
      }
    });
  }