Streaming live at 10am (PST)

Swipe tab panes on mobile devices


#1

Hey Guys!

Recently I bumped into one issue regarding tabs component and probably someone can help me with this one. Also, it would be really useful to share this stuff with other participants of Webflow community.

I’m working on very simple internet store for my friend. Just with couple goods and with one call to action form (Call back). Here is the link: webflow-shop.webflow.io

If you follow this page http://webflow-shop.webflow.io/bracelet-magic you will see “tab component” on Desktop. I used tabs because it’s the optimal way to show image slider with little thumbnails.

But on mobile, it’s not user-friendly to use thumbnails. Optimal way for mobile is - use one big image with little dots at the bottom with the ability to swipe.

At this moment I created this with two components one is visible only on desktop and tablet, other is visible on mobile. I know that it is totally wrong to use 2 components, but I can’t see other solution yet.

I’ve seen this guy created “Tabs - Prev/Next buttons” https://webflowcodestutorials.webflow.io/clickdemos/tabs-prev-next-buttons and that’s also a good feature. But this is not working for my needs.

So perhaps someone knows how to add swipe feature to tab component? I guess it will be a piece of custom code.

Thanks in advance!


#2

This is the right solution.

If you still want to force swipe functionality on tabs component, you can contact me here http://webflowexpert.com