Adding a class only to the snapped slide

[davidjerleke]

Feature request is for:

• embla-carousel-class-names

Discussed in #374

^{Originally posted by jln13x September 15, 2022}
Hey there,

first of all: Embla is amazing, thanks for your work!

I constantly ran into the requirement to only style the currently snapped slide (usually the one in the center) and the plugin embla-carousel-class-names couldn't help with that. The closest option would be the selected one however that applies to all visible slides which is not something that I want.

Use Case:

So I went ahead and quickly wrote a plugin for it and published it to npm to reuse it across multiple projects. The plugin basically just adds a class and allows me to style it.

Would that be something for the embla-carousel-class-names-Plugin ?
If so, I would go ahead and contribute to it and delete my stuff.

If not, is it ok for me to keep the plugin published? Anything I should add?

Thanks alot!

Specification

const options = {
  inView: 'is-in-view', // Applied to slides in view
  snapped: 'is-snapped' // Applied to all slides that belong to the selected scroll snap
}

@jln13x

[davidjerleke]

To be released with v8.0.0-rc12.

[davidjerleke]

@jln13x this feature has been released with v8.0.0-rc12.

[HarshArora-1205]

Hi @davidjerleke.

Can you elaborate on how to use classnames (if possible) with tailwind css?

[davidjerleke]

@HarshArora-1205 I don’t understand the question? Please share some details about what you want to achieve.

[HarshArora-1205]

Okay, so, in runtime the plugin adds class is-snapped and is-in-view to the slides.

When I am using Tailwind css, I wanted to tweak certain properties like opacity and other props by tracking is-snapped class. This can be done by writing custom classes or corresponding js. But I thought if there is any solution to work with snapped classes directly using tailwind css.

So, I stumbled upon this thread in tailwind discussions:
tailwindlabs/tailwindcss#7282

Thus I got to a workaround:
Adding class group on embla__slides and on their child adding class opacity-0 group-[.is-snapped]:opacity-100

This worked well and my query got resolved.
My query was more related to tailwind classes and prefixes but I wonder if there can be a Tailwind class based support in Embla carousel?

[davidjerleke]

@HarshArora-1205 if I'm understanding you correctly, you can configure the snapped class with the snapped option:

ClassNames({ snapped: 'my-tailwind-class-goes-here' })

Is this what you're looking for?

[HarshArora-1205]

Uhm no. default class is okay for me, but when an active slide gets the class is snapped then I want that slide to have full opacity.

This can be done by using custom classes and rules. But like we have hover:opactity-100 class in tailwind to set opacity on hover, is there any way to access if is snapped class is set on the slide or not.

Something like [.is-snapped]:opacity-100.
There are workarounds for this which I found. Like creating tailwind plugin or using group.

Anyways, as I cleared earlier this was more related to tailwind than embla.