Active state for thumbnail in slider not working

Help please!

I’m really stuck here. I can’t finish the project without solving that issue.
I’ll add some more explanations/background.

I’m working on an Ecommerce site. On the Products Template/page I have an image slider with thumbnails. The (inactive) thumbnails are set to 60% opacity. I styled the hover, pressed (and even focused) states opacity to 100%. However, hover and click work but the current/active thumbnail doesn’t stay at 100% opacity but immediately reverts back to 60%.

The slider/carousel is built with SwiperJs – I used the Thumbs Gallery version.
I went through the SwiperJs documentation but since I’m not experienced with code, and have barely any understanding of Javascript, I don’t fully understand what I’m supposed to do.
Since the WF built-in “Pressed” state doesn’t seem to work I now added the following code to the page’s Inside tag:

.thumb-swiper .swiper-slide-thumb-active { opacity: 1; }

Do I need to add the class .swiper-slide-thumb-active somewhere?

See attached image and read-only below.

Is the WF built-in “Pressed” a real active/current state?
Do I need to add a class of “active”?
What am I missing?

Thank you for your help!

Here’s the updated read-only link: Webflow - Ornament-is-crime

I got some help with Javascript…

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.