Building a Solid Slider Component in Webflow
Sliders can be an amazing element to share lots of information in a small amount of space on your website.
However, they can also be quite hard to work with in Webflow. They’re clunky, have strange pre-styled elements to them and refuse to work they way you want half of the time.
This article is a short guide of building a super-minimal, nice looking slider for testimonials in Webflow. The component is available as a cloneable on my Webflow profile, so feel free to clone it over here.
Getting started
A typical, unstyled native slider in Webflow consists of the following elements:
- The main slider wrapper
- A slider mask
- One or more slides
- Slider arrows
- Slider navigation
These elements are pre-styled in various ways. For example, the slider arrows are absolute positioned left and right relative to the slider wrapper, the slider navigation is absolute positioned to the bottom, the slider has a background color and so on.
Styling the slider
So let’s start by giving each element its own class. The slider might now look something like this:
Notice that I’m sharing classes between:
- Slide Wrapper
- Slider Arrow
- Slider Arrow Icon
This is a good starting point, since we want to keep all shared elements styled consistently. Later on, we’re able to customize them further using combo classes.
Also notice that I added a div called Slide inside the Slide Wrapper. This is done since we want to turn each slide into its own component later on, something that’s not possible to do with the Slide Wrapper.
Slider
I’m simply gonna give my Slider class a set height of 35 REM’s and that’s it.
Slide
The slide class is gonna get a height of 100% to fill the total height of the slider, as well as a background color and some border radius.
Slider Nav
I really dislike the Webflow slider navigation, so I’m just gonna hide it all together using display none.
Slider Arrow Icon
I’m gonna replace both default slider icons with new icons (just images) and giving them a set width of 1 REM.
Slider Arrow
The slider arrow class now needs to center the icons vertically, so I’m gonna use flex with a vertical & horizontal centering to achieve that.
After doing all these changes, our slider might now look something like this:
Looks good, right?
Yes it does. And that was really simple. So let’s continue with the slides themselves.
Slide
Since the content is gonna sit inside the Slide-elements themselves, let’s give them some centered vertical flex with a bit of vertical flex gap.
Inside the slide, I’m just gonna add some styled text for this example. This might look something like this:
Turning our slider into a component
Now, there are two ways we could turn this slider into a component:
- Turn the whole slider into one single component with all slides pre-created inside
- Turn each slide into a component and have them nested inside the slider component
Since we want to keep consistent, turning the Slide into a component and having it nested inside the Slider will be the better option. This allows us to customize a single Slide and have every other Slide updated in the same way.
If you look closely, you can see that I turned the main text into a prop for the Slide component. If the slides would have more elements, I would have turned them into props as well.
Now let’s turn the whole Slider into its own component.
Okay, there we go. Now the Slider is a component, and I’m lifting the props of both Slides as props for the Slider component.
This makes it super easy to customize each Slide without having to navigate through the Slides inside the Slider.
Conclusions
Hopefully this little guide helped you create some super-cool slider components in Webflow. If you want to clone the example shown above, feel free to clone in through my Webflow profile by clicking here.
If you have any questions, feel free to write a comment down below or contact me. Also, make sure to check out my Webflow templates on the marketplace and follow me on Instagram, I’m posting some cool things over there.
