Streaming live at 10am (PST)

Add an animation to slider dots


#1

Hello all! I’m working on a site for a client that is insisting that the slider dots transition a specific way (see photo below).

54%20PM

Is there any way to do this using interactions? As you can see, the current slider dots are custom coded already… so my guess is that I’ll probably need to write some JS to get this to work? But I’m worried that if I do that, it will override the JS already controlling the slider dots and break them… I’m wanting to stick with the Webflow slider element itself if possible, rather than a custom-built slider, that way it’s simple for the customer to swap out photos in the future as they have already said this site’s photos will change frequently.

Any help is appreciated!


Here is my public share link: https://preview.webflow.com/preview/cover-8c798f?utm_source=cover-8c798f&preview=56c96d1b0f5ff77c25d3ef8f26c07e47


#2

Hey @kkarnesdesigns,

Wow that’s a very specific request your client have.
I can’t see a fast way of doing this, imo you ll need to recreate a slider with interactions.
It’s not going to be easy for your client to change the pictures of this slider so might not be a very good option.

You could just do the animation of the dots with interaction, overlay above the real dots and sync it with your slider autoslide timer ?

That’s a crazy idea but could work :stuck_out_tongue:
Hope this helps,


#3

@zbrah, thanks for the input! I’ve thought about building the slider and buttons out separately, but the issue is that then, if the slider were clicked they would no longer sync up. If the slider were autoplay only, this would be totally fine. However, the slider needs to be navigable, thus we need to keep these dots/lines connected to the slider itself.

My guess is that I’m just going to need to run the idea of a fully custom slider build by them if they really want this feature…? We’ll see!


#4

Yeah if you want to be able to navigate that’s your only option @kkarnesdesigns
Imo you should charge more for this kind of request, that’s very specific and i don’t think your client realize how much development and time it takes…