[Help]: is-snapped style implemented to all slides

[milos381]

Summary

Hi everyone!

I am using NextJS with TS and SCSS.

When I try to manipulate the snapped slide, the class applies to all slides.
Before this, I tried following the steps from doc's sandbox, but didn't work either.

Current example:

JSX:

        import Styles from './EmblaCarousel.module.scss';
        ...
        
        <div className={Styles.embla__container}>
          {slides.map((video:any, index:number) => (
            <div key={index}>
            <div className={`${Styles.embla__slide} ${'is-snapped' ? Styles.embla__snapped : ''}`} key={index}>
              <div className={Styles.embla__slide__number}>
                <VideoComponent videoId={video?.id} key={`video-${video?.title}`} />
              </div>
            </div>
            </div>
          ))}
        </div>

Styles:

  .test {
    opacity: .5;
  }

Thank you!

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

[milos381]

To anyone confused I did not read the docs properly. Sorry all!

  const [emblaRef, emblaApi] = useEmblaCarousel(options, [
    Autoplay({ playOnInit: false, delay: 3000 }), ClassNames({snapped: Styles.test})
  ]
)