Hello, i’m trying to build a custom slider and i’m no coder (Using chatgpt to help me haha) but i’m a bit stuck. I’ve built this Slider Test (Webflow - Creature Media) which has the interaction i want with the “we” section at the start of each word appearing and disappearing (Although i’d like it to animate a bit nicer but beggars cant be choosers) but where i’m struggling is getting the active line to work as a slider nav and effect the slider that is shown. So I cant link them. the code i’ve been using is supposed to work using some index system but it’s not really working unfortunately.
Any help would be amazing! and I know i’ve probably explained this badly so any questions fire away!
this is the code that i’ve been using to create the interactions
.slider-line {
display: flex;
}
.slider-line.active {
display: flex;
}
.slider-link {
opacity: 0.5;
cursor: pointer;
}
.slider-link.active {
opacity: 1;
}
.slider-we {
display: none;
}
.slider-link.active .slider-we {
display: flex;
}
You can actually achieve this without any custom code. And with only 2-3 lines of custom CSS you can animate the “WE” text block 
I made a quick technical prototype of your case:
Read-only Link
Live preview
The tabs element automatically connects the tab-link-list with the corresponding elements below. When you click on a tab link it changes the content below. You can even animate the fadeIn/fadeOut of the images by selecting a tab link, then going to the interactions panel and select “Tab change” as trigger.
Animated “WE” text
I also animated the “WE” text. If its not clear to you how I did it by looking at the prototype, feel free to ask.
ahhhh thats epic! thanks so much man! there was 1 other thing i was hoping to achieve with this which was having it auto cycle through the different tabs (like the slider does). Do you know if this is possible?
1 Like
Managed to work it out and get it fully working! thanks so much for the help!
1 Like