How to build custom slider

Would it be possible to create a slider that looks like the following mockup I’ve created in webflow?

https://preview.webflow.com/preview/jordan-kellett?utm_source=jordan-kellett&preview=b00a2820515d446d23b83fb7e89f8388

Hi Jordan,

I am not sure what is the slider behaviour. Can you elaborate?

Hello,

There’s an example of the slider on this page. Hopefully this will demonstrate what you need to know.

Thanks.

hmmm… that is a hard one.
I think that with the native Webflow element it will not be possible, especially because of the in and out slides animations and changes. But I am pretty sure you can achieve something quite close to this. Maybe even better behaviour and UX

https://custom-slider-1.webflow.io/
nom nom… maybe a start?

2 Likes

That looks great. How can I pull it across to my website?

from here:
https://webflow.com/website/Custom-Slider

More ideas her:

Is there a way to copy the slider across to my current site, or do I need to look at how you’ve built it and replicate it that way?

I pasted in my previews reply the project’s cloning page. After you clone the project, you can copy & paste it to your project

Ah, I didn’t understand at first. Thank you!

I’ve seemed to run into an issue. When you get towards the end of the slider on the demonstration website, the active slide moves across to right so that the slider doesn’t keep moving when there are no slides left. Is this possible to do in webflow?

Not sure what is the problem and what you want to achieve, please rephrase…
In any case, there’s the settings panel for the slider, where you can disable infinite slides, and to hide the arrows at each end:

Sorry for the poor explanation.

If you look at the following screenshot you can see when it gets to last three slides the active slide moves across to right and the slides stop sliding left.

I don’t think it is possible with the native webflow slider

Thanks for looking anyway :relaxed: