The guide to sliders

Sliders overview

Webflow comes with a pre-built slider (or carousel) component that lets you quickly and easily add a responsive slider to your Webflow sites. This component is found under the Add panel, in the Components section. To add to your site you will simply drag and drop.

Sliders are a popular way to feature images, text, and even videos. And Webflow's slider component is fully responsive, so it looks and works great on any device.

What makes up a slider

When you drag the slider component on to your page, several HTML elements are bundled together to create the slider component.

• ‍The slider Mask: This is the element that holds each of your individual slides
• ‍Left and Right Arrow: These are the link blocks that allow the users to navigate through your slider. These icons can be adjusted and designed in many different ways (as we discuss further, below).
• ‍Slide Nav: This element is what holds your slide navigation, which is made up of small circles that represent each slide within this particular slider. You can also customize these elements by following the instructions below.

Customizing the Left and Right Arrows

By default the arrows used on the slider will be centered vertically, and look like default, white arrow icons.

You can adjust the look of these particular icons by giving them a class, and editing their styles in the Typography section within the Styles panel. Here you can adjust the size (font size), as well as the color (font color).

Replace the arrow icon

If you aren't happy with the default arrow icon, you can always add your own. Simply delete the icon that is there, and replace it with an image/icon of your choosing.

Note: The default icon had pre-existing styles to center it within the arrow link box. To vertically align I suggest using flexbox on the link block and vertically centering the new icon.

Customize the Slide Nav

Along with the custom arrow icons, you can customize the slide nav element as well. Simply click on the slide nav element, and navigate to the Settings panel. Here you will see a section labeled Slide Nav.

Here you can edit wether you want the icons to be circle or square, add number labels, create a shadow, or inverse the colors (to be dark instead of white).

If you want to change the size of the icons themselves, you will need to give the element a class, then adjust the font size in the Typography section under the Style panel.

Adding a slide

Adding a slide is super easy: just click the slider, open the Settings tab and click the + Add Slide button. This will automatically add an unstyled slide to the last slot in the rotation.

You can also add a slide with key commands: just select an existing slide, then press Command+C or Control+C on your keyboard to copy, and Command+V or Control+V to paste. This is a very useful method if you wish to copy an existing slide's style (class) and the content that is within the slide.

Adding an image

Adding images to your slider is easy, and you can do it in two ways: 

1. Add a background image to your slide, or 

2. Drag and drop in an image element into the slide itself

Option 1: Add a background image

Adding your graphics as background images lets you easily place other content (like a headline) on top of the image. This is probably the most common method in using images with slides.

Background images also allow you to adjust the position, set the image to cover or contain, or tile the image in order for it to display the best on your page. Play with each setting to see which fits the best.

Cover: This option will guarantee that the image takes up the entire allowed space inside of the slider. This is the best option if you don't want any strange empty spaces within the slide itself.

Contain: This option will guarantee that the entire image will show, however, in some cases will lead to tiling the image or leaving empty spaces in the slide. This is the best option if showing the entire image is your ultimate goal.

Adding an Image Element

The second method in adding an image is by simply adding in an Image element from the add panel. When using this method, you can insert an image that is larger than the slide itself, the Mask container will not show any parts of the image that extend past the Slider itself. 

Keep in mind, with this method you would need to change the Position of the image to Absolute in order to add content over it. If you want to add content, the easiest method would be to use a background image. (Option 1).