tabs-slider

Tabs

Easy to use tabs slider, written in pure JavaScript.

Please note:

Version 3 only supports modern browsers. To support older browsers (including IE) please use version 2 (v2 branch)

Browser support

• Chrome
• Firefox
• Safari
• Android
• IOS

Thanks to Browserstack for providing a free license, so we can start automating test in different browsers and devices.

Demo

Codepen demo

Simple to use

Include the plugin styles

<link rel="stylesheet" href="css/tabs.css">

Or If you use SASS, you can import a sass source

@import './node_modules/tabs-slider/src/scss/tabs.scss';

We also need a simple markup

<div class="tabs">
  <div class="tabs__bar-wrap">
    <div class="tabs__bar">
      <div class="tabs__controls">View</div>
      <div class="tabs__controls">General</div>
      <div class="tabs__controls">Advanced</div>
    </div>
  </div>
  <div class="tabs__content">
    <div class="tabs__section">
      I'm the first tab View
    </div>
    <div class="tabs__section">
      second tab - General<br>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo eos, iusto laboriosam voluptatem at reiciendis vel, facilis repellendus totam excepturi earum saepe rerum ullam!
    </div>
    <div class="tabs__section">
      Welcome to third tab - Advanced
    </div>
  </div>
</div>

If you need the direction of flow from right to left, you must specify attribute dir

<div class="tabs" dir="rtl">

and add an option when plugin initialization

new TabsSlider('.tabs', {
  rtl: true
});

Add the plugin to the page

<script src="js/tabsSlider.js"></script>

or if you are using a module bundler

npm i tabs-slider

import TabsSlider from 'tabs-slider';

And now the hardest part is to initialize our plugin )

new TabsSlider('.tabs');

And that's all.

Options

But we can also use advanced plugin options. Available options and their default values.

new TabsSlider(elem, {
  animate: true,
  slide: 0,
  rtl: false,
  draggable: true,
  underline: true,
  heightAnimate: true,
  duration: 500,
  easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)'
});

elem (string | HTMLElement) selector or element

animate (bool) animated tabs switching

rtl (bool) base direction

slide (integer) initial slide

draggable (bool) mouse or touch events

underline (bool) active tab underline

heightAnimate (bool) height animation, only if the animation option is true

duration (integer) animation time, only if the animation option is true

easing (string)

Public methods

Public methods for working with the plugin

.show(index)

This method allows you to programmatically navigate to the specified index to the slide.

.recalcStyles()

This method allows you to recalculate styles, if a block with tabs was hidden or content was loaded into tabs.

.destroy()

This method stops the plugin. To reinitialize, you need to call the constructor again.

Events

Plugin provides an event for changing tabs

var elem = document.querySelector('.tabs');
var tabs = new TabsSlider(elem);

elem.addEventListener('tabChange', function(evt) {
  console.log(evt.detail)
  // currentSlide
  // currentIndex
  // currentTab
  // prevIndex
})