Lesson info

The slider is one of the simplest and most powerful components in the Webflow Designer. You can use the slider to present images, text, videos—you name it.In this video, we'll cover five aspects of the slider.

  1. Anatomy of a slider
  2. Creating and switching slides
  3. Adding background images to slides
  4. Adding additional content to slides
  5. Configuring slider settings

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

The slider is one of the most simple and powerful components at our disposal. You can put anything in a slider. Images, text, videos, corrugate...

We'll cover five aspects of a slider...

...starting with Anatomy

Moving on to the slides inside the slider

Adding images

Adding additional content

and finally, Configuring the slider settings

The anatomy of a slider is fairly straightforward: Bun, protein, toppings, bun. The anatomy of a slider component as we drag it in from our Elements Panel into our project is just as simple. It takes up the full width of whatever parent element it's dropped into. In this case, a container.

In the Navigator, we can see the Slider element itself has four children: the mask, which contains the default slides — there are two slides when we start, the left and right arrows, and the slide navigation (or slide nav) which we can see on the bottom. These four components let us style and interact with our Slider.

That's anatomy. Let's move on to the actual slides.

As we already know, we have two slides by default. In our Element Settings Panel, at any time we can go over and add more slides. Once we do that, we have a few different ways to access each slide: right on the Canvas we can press the navigation buttons at the bottom. Of course, all our slides are boring and gray right now. We'll change that in a moment. We can also use the arrows right here in our Slider Settings.

Or, if we're feeling particularly precise, we can press this dropdown to jump to a specific slide.

And finally: we can switch between slides by going over to the Navigator and clicking on any of the slides in our slider.

Those are the slides.

Let's add some images.

Now there are many ways to do this — you can add an image element to a slide, but we're going to cover a really great way to do this, using background images. We'll go this route so we can position the image and add content on top later.

Let's select our first slide and create a class. And once we've done that, we can go down and add a background image. Now we have to tell that image how to behave; how we want it to look inside our slide. Let's turn tiling off, and we can center the image's position and set it to Contain — that will ensure the whole image fits inside the slider. Or we can go with with Cover. This will scale the image to fit, and it'll crop along the sides of the image that don't fit the aspect ratio.

If we go to Preview, and click through our slider, we can see our new background image is functioning perfectly.

Now it's worth noting here that the slide mask — the visible part of the slide — will cut off content outside its boundaries. We can resize the entire element if we simply select our Slider, and set a different size: let's say 500 pixels. The image sizes accordingly. Or maybe we want our slider to behave like a section. So we can place it in our page just like we'd place a section. And just like a section, it'll take up the full width.

And maybe we want it to be a bit taller. Let's set our height to 100vh to take up 100% of the viewport height. This is a perfect transition from images...

...to content.w

And slides — just like div blocks or sections — can contain other components as well. Let's start by dropping a container element right into our slide, so we can keep our content neatly bound. We can drag a heading into the container (placing it right in the container we put inside our slider), and we can go back and drag in a paragraph — we're putting this right under the heading we just dropped in. Then right-click or two-finger-click to select duplicate so we have twice the filler text. Of course, we can select our slide and affect the font color so we can see what we're doing. And the sky's the limit with what we can add here. We can put this button right under our paragraph. Or we can go over and copy an element from a completely separate project. Like the poster for the 1995 hit Chuck Norris film: Top Dog. And place it in our new project. Right in our slide.

Now since the slider component has a bunch of other elements interacting with each other, we're going to avoid setting flex display settings on any of these slides, as if not to tear a hole in the very fabric of space. And time.

Instead, we can center our content by setting our container height to 100% and then modifying o ur display settings. (We're setting display settings on the container element, so our layout is flex, we're using a vertical layout, and of course, we're justifying and aligning our content to the center. Want everything to pull left? Just switch alignment to left.  

Like other elements, we can also add a solid color to the slide, so we can go in and add contrast against the background.

If we go to preview everything? Our slider functions perfectly. Of course from here, we can add additional content to our other slides.

There are tons of ways to do this. We can, of course, create the next slide from scratch, or we can use our first slide as a starting point. (Apply the same class we applied on the first slide to the second slide.) Since that's a starting point, we can create a combo class. On this combo class, we can modify even further, building upon the styling we created on the first slide, but making modifications — like the background image.

And the content? Maybe we want something different here. Or maybe we want the same thing. We can go back over to the first slide, then copy that container to the clipboard. If we go back to the second slide? We can paste. And then modify to our heart's content. [transition effect]

That's content.

Finally, let's dig in to our slider settings. And there are some great controls here under the Element Settings Panel.

Animation type controls how the transition looks when you visit a new slide from the current slide.

We can control the easing method, or even the duration. Like 90,000 milliseconds. Or 407.

On touch devices, the slider supports swipe gestures. You can toggle that option...right here.

Then there's the auto-play slides. (Automatically transition after a certain time.) We can set the timer, here it's 4,000 milliseconds (or four seconds). And if we go to Preview, we can see that in precisely 4 seconds, the transition occurs. And it'll occur again right now.

Of course, outside of Preview, if we go back to our Element Settings Panel we can stop the auto-play after a set number of transitions.

Arrows are up next, and hiding each end of the slider means the first slide won't have a left arrow and the last slide won't have a right arrow.

Finally, we have our Slide Nav controls. These give us options regarding the navigation at the bottom.

Now each of these options give us a tremendous amount of control, so the best way to become familiar with all this is to try it out. You can create a custom backup point by pressing command+shift+s at any time (or control+shift+s on Windows), and you can always restore from that backup in your project settings, especially if you completely destroyed your slider while experimenting.

So. The slider contains the mask, which has our slides inside. We have our left and right arrows. And of course, the navigation at the bottom.

We can select slides from our Canvas, or the Element Settings Panel by pressing the arrows, or using our dropdown, or even visiting the Navigator to select one of the slides from the slider.

We can add background images to each slide.

We can add other content.

And we can configure our slider so it looks and functions exactly how we want it to.

Related tutorial

Slider

4:56