Hi!
Simple question, how this slider is done? It’s on new webflow template pages. We can drag it and swipe it so it is rally cool!
Hi there… I was going to post this exact question this morning so I’ll just join in here instead.
I’ve made a slider to about 80% of the functionality of the above slider but can’t seem to figure out how to keep the current slide centred when it’s active.
For the arrows and dragging, it’s pretty easy:
- Arrows: Give the left and right arrows a class and make them wide (like 15-20%). Optionally, you can delete the icons that come within the default slider. With the new class, set the cursers to w-resize (left) and e-resize (right)
- Dragging: This is enabled by default with the Webflow slider. Just add a class to the slide div and set it’s cursor to the dragging one.
Anyone know how to keep the slides in the view center?
Acually they are using a «slick slider» for this page with some custom code added.
Lets hope the Webflow slider gets an update to do this in the future 
4 Likes
Let’s figure it out! Could you please share the public link with us?
@perkristian This one is really cool, thanks!
@MaciejIVE sorry for the late reply. I’d love to share my public link but can’t as it’s a real project still under development.
However, I’ve managed to get it to work in webflow almost identical to the slick slider. All you need to do is give the mask component of the slider some padding on the sides (i.e. 15-25%). It works well when the browser window isn’t too wide. In the instance someone has a really wide viewport, you’ll just see the center slide only.
Did anyone work out fully this slider? @PixelGeek can you help at all?
Here’s a screen recording I did showing the steps I mentioned in the above posts… all done natively in webflow.
you didnt mention how you did it?
This is what I have so far.
https://preview.webflow.com/preview/customslider?preview=a3dd89ab01dcd5dc85cd99f6150cfbb9
@AntonioBalderas looking good!
@brilliantlights here’s the instructions from earlier posts:
- Arrows: Give the left and right arrows a class and make them wide (like 15-20%). Optionally, you can delete the icons that come within the default slider. With the new class, set the cursers to w-resize (left) and e-resize (right)
- Dragging: This is enabled by default with the Webflow slider. Just add a class to the slide div and set it’s cursor to the dragging one.
- Give the mask component of the slider some padding on the sides (i.e. 15-25%). It works well when the browser window isn’t too wide. In the instance someone has a really wide viewport, you’ll just see the center slide only.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.