Streaming live at 10am (PST)

Cards become swipeable slider on mobile


#1

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


#2

Hi) Maybe owlcarousel with destroy method: https://owlcarousel2.github.io/OwlCarousel2/


#3

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


#4

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


#5

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.


#6

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

Let’s see what the Webflow gurus say)


#7

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:


#8

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:


#9

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