Automatic Vanilla JavaSCRIPT Tabs UI – Auto-tabs.js

Preview:

Description:

Auto-tabs.js is a tiny tabs JavaScript plugin that has the ability to automatically switch between tabs at a given speed.

How to use it:

1. The required HTML structure for the tabs UI.

<div id="tabs">
  <div class="tabs-container">
    <button data-tab="tab1" class="tabs active-tab">
    Tab 1
    </button>
    <button data-tab="tab2" class="tabs">
    Tab 2
    </button>
    <button data-tab="tab3" class="tabs">
    Tab 3
    </button>
  </div>
  <div class="tabs-content-container">
    <div class="tab-content active-tab" data-tab-content="tab1">
      Tab 1 data
    </div>
    <div class="tab-content" data-tab-content="tab2">
      Tab 2 data
    </div>
    <div class="tab-content" data-tab-content="tab3">
      Tab 3 data
    </div>
  </div>
</div>

2. Load the Auto-tabs.js in the document.

<script src="./auto-tabs.js"></script>

3. Initialize the tabs plugin.

new Tabs({
    el: '#tabs',
});

4. The example CSS styles.

.tabs-content-container .tab-content {
  display: none;
}
.tabs-content-container .tab-content.active-tab {
  display: block;
}
/* Basic tabs styling */
#tabs, #tabs2, #tabs3 {
  max-width: 600px;
  margin: 50px;
  margin-top: 0;
  border: 1px solid #d9dee1;
}
.tabs-container {
  display: flex;
}
.tabs {
  flex-grow: 1;
  text-align: left;
  padding: 10px;
  background: #eee;
  cursor: pointer;
  border: none;
  border-radius: 3px;
}
.tabs-content-container {
  padding: 10px;
}
.tabs-container .tabs.active-tab {
  background-color: #fff;
  font-weight: 600;
}

5. Display a slim loading bar in the tabs.

new Tabs({
    el: '#tabs',
    loading: true,
    loadingColor: '#f94c4c',
});

/* loading bar */
.tabs--loader {
  width: 100%;
  height: 1px;
  background-color: black;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: left;
}
@keyframes line-loader {
  to {
    transform: scaleX(1);
  }
}
.tabs-container .tabs.active-tab .tabs--loader {
  animation-name: line-loader;
  animation-timing-function: linear;
}

6. Set the time to wait before jumping to the next tab. Default: 2000.

new Tabs({
    el: '#tabs',
    timer: 4000,
});