Styling the "Text" of the Active Item in "Accordion"

At a glance

The community member has two questions: one about styling the "Text" of the active item in the "Accordion", and another about integrating SwiperJS, as their slider is working but the behavior seems odd. For the styling question, a community member suggests using the "open state" of the Item Trigger to change the styles, and using CSS variables if more control is needed. For the SwiperJS issue, the community members discuss the problem, with one suggesting to try asking ChatGPT, and another noting that the issue seems to be related to the need to click to start the animation. However, there is no explicitly marked answer to the SwiperJS issue.

Useful resources

rrangelavier

Hi everyone, I have two questions that I believe are simple, one about styling and the other about JavaScript.

Style:
How can I style the "Text" of the active item in the "Accordion"?

JavaScript:
Do I need any additional configuration to integrate SwiperJS? My slider is working, but its behavior seems a bit odd!

Link: https://minhamackninha.wstd.io/

Thanks in advance for your help!

Attachments

9 comments

JJohn Siciliano

On the Item Trigger there is an open state. There you can change styles. I'd try setting the color there. If you need to control individual style values then CSS variable will be the go to https://youtu.be/rg49mmDvdlE

Attachment

JJohn Siciliano

For swiper is is the scrolling testimonials? Seems to be working for me

rrangelavier

Thank you for the tip about the open state in the Item Trigger. 😍

rrangelavier

Thank you for checking! It seems to work, but sometimes the behavior is strange. It starts normally, but around the 3rd or 4th item, it stops, stutters, and then resumes.

JJohn Siciliano

Oh I see. I'm not familiar with swiper to help much. Have you tried asking chatgpt?

rrangelavier

I've already tried GPT, but it doesn't help much! The same issue happens in this other project using Swiper as well. It starts normally but then doesn't seem smooth.

Link: https://portfolio-projeto-pessoal-0volm.wstd.io/

JJeremy

@rangelavier, I don't use swiperjs but I just loaded each of them to a blank project to see what you mean. It seems that in all of them you need to click to start the animation. You must have made changes to the JS?

rrangelavier

I didn’t make changes to the JS other than the basic Swiper configuration. 😕

Attachment

JJeremy

We must be talking about different things. The image is from the swiper.js demos in the marketplace.

Attachments

Add a reply

Join the Webstudio community

Styling the "Text" of the Active Item in "Accordion"