Cards become swipeable slider on mobile

What’s the best way to make cards turn into a slides in a slider on mobile? Trying to turn this layout on desktop:

into this layout on mobile

image

1 Like

Hi) Maybe owlcarousel with destroy method: Home | Owl Carousel | 2.3.4

Love the suggestion @bro-design but I’m really hoping for a Webflow-native solution :fist_right:t3::fist_left:t3:

1 Like

Duplicate cards to slider and hide/show content on desktop and mobile devices)
If card content was created with CMS, you will have to edit cards information for only one… IMHO

Yeah, that’s my last resort, I’m hoping for a solution that doesn’t require me to duplicate content (or create symbols of content) and show one set of content content desktop and another on mobile.

2 Likes

I also asked this question many times, but I could not find a solution.

Let’s see what the Webflow gurus say)

Hi @jonreese and @bro-design,

Definitely a good question.

There currently isn’t a way to have CMS content within a slider without a hack:

This hack will allow you to create the content once (used on desktop and mobile), and update within the CMS.

Hopefully this helps :blush:

2 Likes

Figured it out! Not sure if this will work for CMS, but I didn’t need it to be CMS driven so… here you go! Here’s how to create a slider that displays content as a grid of cards on desktop/tablet but collapses to an elegant swipeable row of cards on mobile.

Here’s a clonable version of the project you can play with :smile: :fist_right:t3: :boom: :fist_left:t3:

Here’s the public Preview link.

And here’s the video:

8 Likes

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.