Infinite Tab Bar with swipe/pan interactions

Create a tab bar with swipe/pan interactions like the one of Google search options that you can see when you are using your smart phone. You just need pan events and a little of CSS. I have used MDL for the basic mockup and Hammer for pan gesture.

by Génesis García Morilla

HTML

<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">My App</span>
    </div>
  </header>
  <main class="mdl-layout__content">
    <div class="mdl-tabs mdl-js-tabs">
      <div class="mdl-tabs__tab-bar">
        <div><a href="#tab1-panel" class="mdl-tabs__tab is-active">1 Priorities</a></div>
        <div><a href="#tab2-panel" class="mdl-tabs__tab">2 Days</a></div>
        <div><a href="#tab3-panel" class="mdl-tabs__tab">3 Time</a></div>
        <div><a href="#tab4-panel" class="mdl-tabs__tab">4 Stop</a></div>
        <div><a href="#tab5-panel" class="mdl-tabs__tab">5 Just do it</a></div>
        <div><a href="#tab6-panel" class="mdl-tabs__tab">6 Divide</a></div>
        <div><a href="#tab7-panel" class="mdl-tabs__tab">7 Delegate</a></div>
        <div><a href="#tab8-panel" class="mdl-tabs__tab">8 Procrastinate</a></div>
      </div>
      <div class="mdl-tabs__panel is-active" id="tab1-panel">
        <p>There is always time. Time is priorities.</p>
      </div>
      <div class="mdl-tabs__panel" id="tab2-panel">
        <p>Only plan for 4-5 hours of real work per day. Days always fill up (David Heinemeier Hansson)</p>
      </div>
      <div class="mdl-tabs__panel" id="tab3-panel">
        <p>Your time is 1000 €/hour, and you need to act accordingly (Jason Cohen)</p>
      </div>
      <div class="mdl-tabs__panel" id="tab4-panel">
        <p>Stop multi-tasking. It merely kills you focus.</p>
      </div>
      <div class="mdl-tabs__panel" id="tab5-panel">
        <p>Doing is better than perfect (Facebook)</p>
      </div>
      <div class="mdl-tabs__panel" id="tab6-panel">
        <p>Separate thinking and execution...

CSS

a {
  user-drag: none;
  -webkit-user-drag: none;
}

.mdl-tabs__tab-bar {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.mdl-tabs__tab-bar > div {
  display: inline-block;
}

JavaScript

var $tab_bar = document.querySelector(".mdl-tabs__tab-bar");

// Our events are going to be in the tab bar
var mc = new Hammer($tab_bar);

// Our specific pan event
mc.add(new Hammer.Pan({
  direction: Hammer.DIRECTION_HORIZONTAL
}));

// Listen to events
mc.on("panleft panright", function(e) {
  if (e.type === "panleft") $tab_bar.scrollLeft += 10;
  else $tab_bar.scrollLeft -= 10;
});