Skip to content
Tabs slider
Branch: master
Clone or download
Latest commit eccd467 Apr 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist #1 removed banner from style build Oct 26, 2018
src moved the banner to the config Oct 25, 2018
.babelrc lets get started Aug 3, 2018
.editorconfig lets get started Aug 3, 2018
.eslintignore added eslintignore Oct 25, 2018
.eslintrc lets get started Aug 3, 2018
.gitignore lets get started Aug 3, 2018
LICENSE Initial commit Aug 3, 2018
README.md Update README.md Apr 3, 2019
package-lock.json 1.2.1 Oct 26, 2018
package.json 1.2.1 Oct 26, 2018
postcss.config.js lets get started Aug 3, 2018
webpack.config.js #1 removed banner from style build Oct 26, 2018

README.md

Tabs

Easy to use tabs slider, written in pure JavaScript.

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">
    <div class="tabs__controls">View</div>
    <div class="tabs__controls">General</div>
    <div class="tabs__controls">Advanced</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>

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,
  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

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
})
You can’t perform that action at this time.