Laura Niebel Headshot | Laura Niebel Web Design

Cloneable Webflow Resources: Card Slider

And here comes another great little resource for Webflow! Just recently I needed a card slider for a Webflow web design project I was working on. Luckily someone had already created such a component and published it as a cloneable resource on the Webflow Showcase. So building the slider from scratch wasn't necessary (what a time saver). Unfortunately I can't remember the name of the original developer and can't find the resource on the showcase anymore (if you've created this - thanks, and make yourself known so I can credit you here!).

As you can see on the sample staging site at xxx the slider is made up of individual cards that scroll horizontally when you move your mouse or use a swipe gesture on mobile. That's right, the slider also works on mobile devices such as tablets and phones. A link (in this case a button) can lead to either an external site, internal page or even an individual CMS page. In the example component the slider is set up as part of a CMS collection and pulls data from the CMS. Neat!

To use the slider on your own site you have to:

  1. Clone the project and copy the slider over to the site you want to use it on
  2. Set up your own CMS collection and connect it to the slider.
  3. Copy the custom code that is present in the page settings into your own project. You can access the settings by pressing the little cog icon next to the page your slider is located on.

The card slider as shown in Webflow's Designer

The card slider as it will appear on the published site

Don't forget to copy the page settigs code into your own project

Keep in mind that only after you publish your site, you'll the the slider in action. The slider won't show or function properly in Webflow's own preview or in the Designer.

You can check out (and clone) the slider project here: https://webflow.com/website/Webflow-Components

This might also interest you...

Tuesday, December 31, 2019

Matterport: What it is and how you can integrate it into your next Webflow project

Ever heard of Matterport? The service allows you to place virtual walkthroughs on your client's website. This could be especially useful for real estate agents and tourism businesses. Let me show you how to easily integrate this feature into your next Webflow project.

Read more...
Thursday, December 26, 2019

How to source a background video from the Webflow CMS

Would you like to use a dynamic background video on your site? Maybe even use it on your CMS collection page? I show you how this is done in just 8-9 steps! Let's get started...

Read more...
Tuesday, December 24, 2019

How to create a cool slide in out hover interaction with Webflow

Want to do a fun hover animation with slide in text for your next project? I've made a short video to show you how it's done and there's also a link to the cloneable example project.

Read more...

Join the newsletter for Webflow & Web Design updates.

Thanks for subscribing! Your first newsletter will arrive in your inbox soon.
Oops! Something went wrong! Try again or get in touch via the form below, so I can add you manually!

Have questions or want to talk about a project idea?

Just send an email to laura.s.niebel@gmail.com or fill out the form below. I'm looking forward to hear from you!

Thanks! I'll get back to you as soon as possible!
Oops! Something went wrong while submitting the form. Please try again or contact me via email.