CARD NUMBER 1
Overview
Swiper JS with a callback function that is triggered when the active index changes, which then updates the label and color of the heading active-card-label with the corresponding attributes of the active slide.
The component above is something I needed for a website I worked on recently and I am sharing it here with the community in case y'all needed something similar for your projects.
How to Customize
1- Select swiper-slide then go to Element Settings or Press D on your keyboard.
2- Then go to Custom attributes.
3- In the Custom Attributes, Change the value of the attribute Not the name.
4- And that's it! Now, publish the site. Just don't forget to copy the custom code in the page settings "Before </body> tag" if you're copying this into your website.