Tab panels swipe-able in mobile view?

问题

I have a tabbed menu and I want the tabbed menu (the ul class="tabs") to be swipe-able in mobile view.

EDIT: I found a snippet on using Slick JS, I never knew about this JS but I want it to apply this codepen on my current tabbed menu.

How to combine with my current tabbed menu properly? I tried to combine it but the current UI design of my tabbed menu getting messed up.

Here's my codepen of tabbed menu

<section class="wrapper">
<ul class="tabs">
   <li class="active"><span class="icons-tabbed icon-icon-tab-locator">Tab 1</span></li>
   <li><span  id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 2</span></li>
   <li><span  id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 3</span></li>
</ul>
<ul class="tab__content">
   <li class="active">
      <div id="tab1" class="content__wrapper">
      </div>
   </li>

回答1:

If all you want to do is swipe horizontally on a menu, to reveal any other nav items not visible in the viewport, you can do that with css.

@media screen and (max-width: 768px) {
  .tabs {
    overflow-x: scroll;
    white-space: nowrap;
  }
}

回答2:

Use jquery.mobile. This is ideal for your purpose. I wrote a sample of how it works. What you will have to do next is to bind the swipe event with your click tabs. I suggest you use next() for the right swipe and prev() for left swipe to target the tabs.

See this sample:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
  $("p").on("swipeleft",function(){
   alert('swiped left');
  });
   $("p").on("swiperight",function(){
   alert('swiped right');
  });
});
</script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  </div>

  <div data-role="main" class="ui-content">
    <p style="background:red; height:250px; font-size:50px">If you swipe me in the left or right, an event will be triggered.</p>

  </div>

  </div>

</body>
</html>

来源：https://stackoverflow.com/questions/40238250/tab-panels-swipe-able-in-mobile-view

标签

javascript

jquery

responsive-design

swipe

slick.js