INTRO

INTRO

New

Intro to the Designer

Intro to the Designer

New

2:48

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

HTML Structure

HTML Structure

New

1:55

WEB STRUCTURE

WEB STRUCTURE

New

The Box Model

The Box Model

New

1:54

Element Hierarchy

Element Hierarchy

New

3:57

Navigator Panel

Navigator Panel

New

2:45

ELEMENTS

ELEMENTS

New

Element Panel

Element Panel

New

1:49

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div block

Div block

New

3:37

Buttons & Links

Buttons & Links

New

Button

Button

New

14:08

Link Block

Link Block

New

9:35

Text Link

Text Link

New

1:16

Typography

Typography

New

3:20

Heading

Heading

New

2:02

Paragraph

Paragraph

New

4:42

Rich Text

Rich Text

New

3:52

Text Block

Text Block

New

0:56

Block Quote

Block Quote

New

0:42

List

List

New

2:31

Media

Media

New

Image

Image

New

3:39

Image File Types

Image File Types

New

2:22

Image Resolution

Image Resolution

New

3:28

Assets Panel

Assets Panel

New

3:08

Video

Video

New

1:20

Background Video

Background Video

New

3:15

Components

Components

New

Intro to Forms

Intro to Forms

New

4:55

Styling Forms

Styling Forms

New

2:55

Navbar

Navbar

New

9:38

Styling a Navbar

Styling a Navbar

New

4:34

Navbar Menu Button

Navbar Menu Button

New

4:51

Slider

Slider

New

4:56

Tabs

Tabs

New

4:38

Lightbox

Lightbox

New

3:44

Map

Map

New

2:58

Dropdown

Dropdown

New

4:38

Social Media Buttons

Social Media Buttons

New

2:49

Custom Code Embed

Custom Code Embed

New

1:24

Symbols

Symbols

New

3:47

Styling Basics

Styling Basics

New

Intro to Style Panel

Intro to Style Panel

New

3:15

HTML Tags

HTML Tags

New

3:59

Classes

Classes

New

2:46

Combo Classes

Combo Classes

New

4:05

Text Style Inheritance

Text Style Inheritance

New

3:18

Style Manager

Style Manager

New

1:56

States

States

New

2:47

Transitions

Transitions

New

2:40

Color Picker & Swatches

Color Picker & Swatches

New

3:51

Color Values

Color Values

New

3:22

Layout Basics

Layout Basics

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Display Settings

Display Settings

New

2:54

Padding & Margin

Padding & Margin

New

2:48

Width & Height Units

Width & Height Units

New

3:59

Floats & Clears

Floats & Clears

New

1:52

Flexbox & Grid

Flexbox & Grid

New

Intro to Flexbox

Intro to Flexbox

New

2:27

Centering elements with Flexbox

Centering elements with Flexbox

New

1:20

Equal height layouts with Flexbox

Equal height layouts with Flexbox

New

1:47

Grid layouts overview

Grid layouts overview

New

4:18

Flexbox vs. Grid

Flexbox vs. Grid

New

4:00

Advanced Layout

Advanced Layout

New

Positioning Overview

Positioning Overview

New

1:48

Relative Positioning

Relative Positioning

New

1:43

Absolute Positioning

Absolute Positioning

New

1:43

Fixed Positioning

Fixed Positioning

New

1:27

Z-Index

Z-Index

New

1:49

Overflow

Overflow

New

1:49

Styling Typography

Styling Typography

New

Intro to Web Typography

Intro to Web Typography

New

3:20

Typography Units

Typography Units

New

2:43

Line Height

Line Height

New

1:38

Advanced Typography Styles

Advanced Typography Styles

New

3:01

Google Fonts

Google Fonts

New

1:18

Custom Fonts

Custom Fonts

New

1:27

Text Shadow

Text Shadow

New

2:36

Background & Border Styles

Background & Border Styles

New

Background Styles Overview

Background Styles Overview

New

2:20

Background Image

Background Image

New

2:04

Background Gradient

Background Gradient

New

3:02

Border

Border

New

3:07

Border Radius

Border Radius

New

3:22

Box Shadow

Box Shadow

New

3:34

3D Styles

3D Styles

New

Intro to 3D

Intro to 3D

New

2:25

3D Perspective

3D Perspective

New

4:01

2D & 3D Transforms

2D & 3D Transforms

New

4:53

EFFECTS

EFFECTS

New

Opacity

Opacity

New

1:44

Filters

Filters

New

2:59

Cursors

Cursors

New

1:45

Responsive Design

Responsive Design

New

new course
CSS grid landing page tutorial (36min)

Lesson info

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

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

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.