[Feat]: Add data attributes plugin

[DanielSusanu]

Which variants of Embla Carousel are relevant to this feature request?

• 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)

Feature description

I am proposing the addition of a DataAttributes plugin that dynamically adds and removes custom HTML data attributes on the carousel and its slides based on various states and events. This would work similarly to the existing ClassNames plugin but would manipulate data attributes (data-*) instead of CSS classes.

Additional Context

The DataAttributes plugin would:

1. Add or remove custom data attributes on the root element and individual slides.
2. Use attributes to indicate states such as data-dragging, data-snapped, and data-in-view.
3. Listen for key carousel events such as select, pointerDown, pointerUp, and slidesInView to manage these attributes dynamically.

I will be happy to contribute or fully implement this plugin.

Thank you for considering this feature request. I believe it will be a valuable addition to the ecosystem and enhance the way the carousel is integrate with modern CSS frameworks.

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for feature requests

[davidjerleke]

Hi @DanielSusanu,

I think this is a good idea! But at the time of writing, I'm not sure how to solve this in an optimal way. The ClassNames plugin has a lot of logic ready that can be used but I haven't thought about if it makes sense to create a more flexible plugin that solves both attribute and class name toggling, or if it's just better to duplicate the plugin and change the class attribute to data attributes.

Feel free to share your thoughts.

[DanielSusanu]

Hi @davidjerleke,

Thanks for considering this feature.

I believe keeping these as two separate plugins is the best approach, as it aligns with the single-purpose design approach of the existing plugins in the library. Combining the two functionalities would lead to a more complex codebase and would likely require renaming the plugin to describe both purposes.

Creating an additional DataAttributes plugin that initially shares most of the logic with the ClassNames plugin will be more straightforward. This will result in clearer, more maintainable code that focuses solely on data attribute handling.

This approach allows developers to easily choose between using class names, data attributes, or both, based on their needs.

Let me know what you think.

[davidjerleke]

If anyone else other than me @davidjerleke and @DanielSusanu has any input to share, please do it here as soon as possible before the implementation of this plugin starts. Otherwise breaking changes will be postponed to the next major release.

[davidjerleke]

@DanielSusanu I want to ask if you would want to develop the DataAttributes plugin and create a PR?

If yes, it's good for you to know that I will make some improvements to the ClassNames plugin when I get the chance that might be relevant to use in the DataAttributes plugin. So you can either wait until I'm done with that or start working on it now with the knowledge that some changes may be requested during the development process.

[DanielSusanu]

Hi @davidjerleke yes, I can develop the plugin.

I will wait till you've done your updates.
Do you have a timeline in your mind?

[davidjerleke]

@DanielSusanu that's good news 👍.

Do you have a timeline in your mind?

Unfortunately no. My spare time is very limited and I can't really plan when I will get my next chance to work on this project. So can't make promises or give ETA's.

[DanielSusanu]

@davidjerleke No worries.
Will catch up when you have time to work on this.