Swipe to change tabs

Hi there,

I’ve reached out to the Webflow Community with questions several times without any success so far… but I’m a helpless optimist that’s simply out of ideas…

As you’ll notice on my site, I’ve incorporated a Tabs component in the “Our Approach” section of my website, all the way at the bottom of the Home page.

I’ve already used @samliew 's very helpful tutorial to add Prev/Bext buttons to the tabs and they work great, but my client wants to be able to swipe between tab panes on mobile…

It seems like this should be easy to do with a bit of custom code, but even after tinkering with it myself a bit I can’t seem to get it right…

Any help would be IMMENSELY appreciated, this is all I need to officially wrap up one of my favorite projects in Webflow yet.

Here’s my read-only link: https://preview.webflow.com/preview/studio-hue?utm_medium=preview_link&utm_source=designer&utm_content=studio-hue&preview=12e32bfb8790e7af06eaa48abb68d6f8&mode=preview

THANK YOU !!! :slight_smile:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Benji!

Thanks much for posting and I am sorry to hear you haven’t had much luck in getting responses in the past. Know that our team at Webflow is working hard to improve this and support our community!

This is a unique use case indeed and you are correct I believe it will just take a little custom code to solve, so I did some searching and testing, and I believe I found a possible solution!

Here is the preview link of it working on my end:
https://forum-swipeable-tabs.webflow.io/

Here is a read-only of it implemented in the project alongside @samliew 's prev/next tab code.
https://preview.webflow.com/preview/forum-swipeable-tabs?utm_medium=preview_link&utm_source=designer&utm_content=forum-swipeable-tabs&preview=96b7af1e26b2315038307858ecb15421&mode=preview

And finally, here is the specific code that makes it work. It is targeted all of the default classes that come with the native tab component in Webflow, and the trick to getting the jquery “swipe” function to work is to add in the separate touch swipe library from jquery.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>

<script>
$(".w-tab-content").swipe( {
 swipeLeft:function(event, direction, distance, duration, fingerCount) {
      $(".w-tab-menu a.w--current").next('a').click();
    },
 swipeRight:function(event, direction, distance, duration, fingerCount) {
      $(".w-tab-menu a.w--current").prev('a').click();
    },
  });
</script>

Give it a try and let me know if you have any questions with this.

1 Like

YOU. ARE. THE. BEST !!!

Seriously, Corey, I can’t thank you enough. This is absolutely perfect, there’s just nothing else to say - the quality and timeliness of your response have left me just floored…

It might seem strange to get so excited over something so “small”, but this was really getting under my skin and I’m genuinely so happy to have it resolved.

A very sincere THANK YOU once again, so much, for your help here. You’ll definitely be due for some solid karma…!!!

Wishing you all the very best,
Benji

1 Like

STELLAR!!

So thankful I was able to help Benji, and thank YOU for continuing to post on the forum even if you haven’t always had luck getting responses in the past. Many others can now benefit from this question being solved and as the community grows quickly we will do our best to keep helping each other accomplish more, together! :tada:

Hello,

Thank you very much ! I just wonder to set the first item by default ?
In my case sometime I’ve 3 images, sometimes only 2. And then when user load the page, the current Big picture is empty. Any idea to set the index on the first image by default ?
Thank you in advance and again, well done for the nice work !
Exemple : https://www.jeunepousse.co/product/robe-a-fleur

Link