Version 3 only supports modern browsers. To support older browsers (including IE) please use version 2 (v2 branch)
- Chrome
- Firefox
- Safari
- Android
- IOS
Thanks to Browserstack for providing a free license, so we can start automating test in different browsers and devices.
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>
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.
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 for working with the plugin
This method allows you to programmatically navigate to the specified index to the slide.
This method allows you to recalculate styles, if a block with tabs was hidden or content was loaded into tabs.
This method stops the plugin. To reinitialize, you need to call the constructor again.
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
})