title: How to create android like swipe tabs in html?
body: <p>How to create the following tabs using javascript/jquery?<br/><br/>
  <a href="https://i.stack.imgur.com/UZxtE.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UZxtE.gif" alt="enter image description here"></a></p>
  
  <p>I have attempted to make this using slick.js but every time I swipe the tabs, slick registers it as a click and loads the content of the tab I just touched. How can I eliminate this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    'use strict';
    $('.pageFoot').slick({
      slidesToShow: 5,
      slidesToScroll: 1,
      asNavFor: '.pageContent',
      arrows: false,
      infinite: false,
      focusOnSelect: true,
      centerMode: true,
      swipeToSlide: true,
      touchThreshold: 10,
    });
    $('.pageContent').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      asNavFor: '.pageFoot',
      arrows: false,
      infinite: false,
      swipeToSlide: true,
      touchThreshold: 10
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: 10vh 90vh;
  }
  
  .pageFoot {
    height: 10vh;
    width: 100vw;
  }
  
  .pageFootItem {
    height: 10vh!important;
  }
  
  .pageContent,
  .pageContentItem {
    height: 90vh!important;
    width: 100vw;
  }
  
  .pageFootItem.slick-current {
    box-shadow: inset 0 -5px aqua;
    color: aqua;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="pageFoot"&gt;
      &lt;div class='pageFootItem'&gt;Intro&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T01&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T02&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T03&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T04&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T05&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T06&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T07&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T08&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T09&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T10&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T11&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T12&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T13&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T14&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T15&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T16&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T17&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T18&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T19&lt;/div&gt;
      &lt;div class='pageFootItem'&gt;T20&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="pageContent"&gt;
      &lt;div class="pageContentItem"&gt;Content1&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content2&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content3&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content4&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content5&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content6&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content7&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content8&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content9&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content10&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content11&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content12&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content13&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content14&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content15&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content16&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content17&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content18&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content19&lt;/div&gt;
      &lt;div class="pageContentItem"&gt;Content20&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As slick.js library isn't free for commercial use, is there any other way of achieving this?</p>