Slider — Webflow tutorial

Learn how to build responsive image sliders — slideshows or carousels.

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) — 0:22 — Anatomy of a slider
(2) — 1:01 — Creating and switching slides
(3) — 1:41 — Adding background images to slides
(4) — 3:01 — Adding additional content to slides
(5) — 5:06— Configuring slider settings

Steps in the video:
00:00 - Introduction
00:22 - Anatomy
01:01 - Slides
01:41 - Images
03:01 - Content
05:06 - Settings

Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

-------

Grow your freelance career in web design:

Learn about responsive web design:

[Labattfartoui]

Webflow is amazing, but it wouldn't be half as good without all these videos. I've watched probably 100 of them so far and it's made a huge difference in the speed and quality of my work. Love the humor, too. Makes boring subjects much more fun.

[carpathianshepherdess]

The humour in these is brilliant! Thanks for the tutorial series.

[ErdalEyican]

omg i was so clumsy with fitting in images in the slider and making it look nice. So happy i came across this video and my troubles have gone by like a soothing breeze

[marijnkraai]

Excellent video, I've already learned a lot. I also really love the little jokes in the video's ;)

[ayasuzuki]

Very nice video! I like the “bun, proteins, toppings, bun”

[DANNFIGDESIGNS]

I can actually tell you're under the weather. That's how much I listen to you. lol. You are a Super Trooper! Love your vids. Sorry if I'm wrong...

[d]

Thank you so much. I was expecting this to be way harder in my mind but this was unbelievably easy to replicate. God bless

[DeepfriedBaby]

I remember when creating a slider was a massive project. This is much better. haha

[Digi_ClientShowcase]

Any chance of adding a function directly to the editor to change the Nav-Circles colour without having to use custom code to do so?

[pieteb_nl]

This tutorial is just not the same without that one guy that does all the Webfllow tutorials

[valikvalentiev]

But can I create a custom slider with Webflow? For example: can I place right and left arrows above in the top right corner above the text? And can I upload my own vector icons? Just want to know how customizable Webflow really is. Thanks

[tanviatnyu]

Okay, I I want to add a powerpoint to my portfolio and I feel the slider is the best way to go about. I am trying to add multiple images onto the slider but there is no option to export multiple images from CMS entry. Second, if I make a change in one template page, it leads to a corresponding change in all the pages. The content of the deck per page is dynamic, not static - hence need help with approach 1!

[thevezs]

Webflow tutorials are great - the only issue I have is that it doesn't solve real project scenarios like on mobile. This looks great on desktop but is unusable on mobile.

[shbdesign]

What about images in Mobile Layout, I have some nice width renderings looks great on desktop but in Mobile they suck is there an option to solve this?

[nickgoesvestmode]

Can your slides be called from a collection?

[haeki]

whats the best image size for the slider ? can anyone help me with that please

[shaileechoxi]

I need help with this. I want to use lightbox inside a slider. Is that possible or can you share any source?

[PhillGraaf]

such a great Tutorial... The only thing is that I add Images to my solider but When I preview them, they aren't visible! At first it worked but now... not anymore.

[davek]

Can the left and right icons be replaced with custom icons and can the pagination be styled?

[MohammadaAprilianto]

how to make slider from collection list?