How can I create a slider on mobile where cards turn into slides, using Webflow?

TL;DR

Place each card in individual slides within a Slider component.
Duplicate the card section: show the original on desktop/tablet and the Slider version on mobile using Webflow’s visibility settings.
Style slides for mobile view and adjust Slider settings for swipe-friendly UX.

To create a slider on mobile where card-style elements turn into slides, you need to structure your content inside a Slider component and use Webflow's visibility settings to control how the layout behaves across breakpoints.

1. Add Cards in a Slider Component

Drag a Slider component from the Add panel into your layout.
Inside each Slide, place one Card element (the content you wish to turn into a slide on mobile).
Design these cards to match your desktop layout, but within each Slide block.

2. Only Display Slider on Mobile

Duplicate your card section: one version for desktop/tablet and one version for mobile.
For the Slider version:
Select the desktop version and go to Style > Display Setting, set to none on mobile.
Select the slider version and set to none on desktop and tablet, then block or flex on mobile.
This ensures only mobile users see the slider version.

3. Style Slides for Mobile

Select the Slide and Card elements in the mobile breakpoint.
Set the Slide width to 100%, and style the Card for optimal mobile view (e.g., stack content vertically, adjust padding).
Make sure each Slide holds only one Card per slide to maintain a user-friendly swipe experience.

4. Customize Slider Settings

With the Slider selected, go to the Element Settings panel:
Enable or disable infinite scrolling depending on your preference.
Toggle slide navigation or arrows visibility off if you want a cleaner mobile UI that relies on swipe gestures.

5. Test Across Breakpoints

Use Webflow’s preview mode and breakpoint controls to check behavior:
On Desktop and Tablet: Cards display in a grid or other layout.
On Mobile: Cards appear within a horizontal slider.

Summary

Create mobile-only slide functionality by duplicating your card layout into a Slider component, showing it only on mobile, and hiding the desktop version. Each card becomes a separate slide, offering a clean swipe UX.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How can I create a form on my Webflow site for email newsletter subscriptions using Mailerlite without the embedded forms provided by Mailerlite and without using Integromate or Make briefly?

How can I remove unnecessary collections from my Webflow website?

How can I fix the W3C validation errors related to the noscript tag and the Facebook pixel code in the head tag of my Webflow website?

How can I set a default option for the select dropdown button in Webflow e-commerce using basic JavaScript lines?

How can I add custom CSS media queries to the Header in the custom code section in Webflow?

How can I use Webflow to replace the image in my button with an icon that is part of the button and still be able to add a link block?

What does the configuration of Cloudflare Workers look like to set up a separate Guide section as another Webflow site using the CMS system in Webflow when the main site has reached the max page limit? After setting up the configuration, how do I point my main domain at the provided Routes URL from Cloudflare?

How can I make one column sticky and one column scrollable in the About Us section of my Webflow Grid?

Is it a bug if I receive an alert stating "You've created all the items allowed by your Webflow CMS Hosting plan" when my website only has 104 entries, which is significantly below the allowed limit of 2,000 items in the CMS?

How can I resolve the spacing and sizing issues with Lottie animations on my Webflow page?

How can I edit or remove the brown color animation in Webflow that appears when scrolling?

What is Wized and how does it make building advanced web apps using Webflow easier?

How can I make my fixed menu in Webflow invert colors when scrolling over sections and their images? I've tried using custom code but it doesn't seem to work.

Have you experienced compatibility issues with Webflow on Safari where a significant portion of your site disappears while it appears fine on Chrome, Firefox, and Edge?

How can I make my Webflow navbar responsive when switching to mobile landscape breakpoints?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I dynamically redirect to a CMS created after form submission in Webflow?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!

How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?

Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?

How can I close a dropdown in Webflow when clicking on a link?

Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?

How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?

How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?

How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?

How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?

How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?

How can I change the language of the Google Maps embed from English to Arabic in Webflow?

How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?