davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.97k stars 180 forks source link

Adding a class only to the snapped slide #542

Closed davidjerleke closed 1 year ago

davidjerleke commented 1 year ago

Feature request is for:

Discussed in https://github.com/davidjerleke/embla-carousel/discussions/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: ![image](https://user-images.githubusercontent.com/85513960/190501723-95b4fa9b-756f-481c-839d-80c2f6b142a9.png) So I went ahead and quickly wrote a [plugin](https://github.com/jln13x/embla-carousel-snap-class) 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 commented 1 year ago

To be released with v8.0.0-rc12.

davidjerleke commented 1 year ago

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