[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.

[DanielSusanu]

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

[davidjerleke]

Hi again @DanielSusanu,

I just made the improvements I mentioned to the ClassNames plugin. Here's the current state of the plugin with the updates if you want to use that as a base for the DataAttributes plugin.

Best,
David

[davidjerleke]

@DanielSusanu just want to double check that you've seen my last comment. Not to stress you though.

[DanielSusanu]

Hey @davidjerleke, I've seen your message but not your changes. Will do this coming weekend, and get in touch again.

[davidjerleke]

@DanielSusanu maybe I'm misunderstanding you then 🙂? This is the PR with the improvements to the ClassNames plugin I had in mind:

• [Feat]: ClassNames - Add possibility to pass an array of strings and add a loop option #1061

My point was that I wanted to do these improvements first so you can use that base (including the improvements) when you begin working on the DataAttributes plugin. This is how the ClassNames plugin code looks after I recently merged the PR above.

So now that I'm done feel free to start working on the DataAttributes plugin. If you have any questions about Embla let me know and I will answer you when I get the chance.