k-ivan / tabs-slider

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
})

tabs-slider's Issues

Swipe lags on mobile devices

Missing preventDefault on touchmove event

tabs-slider/src/js/tabsSlider.js

Line 304 in e057f3c

if (e.targetTouches) {

Update readme for v2

merge tabs title with swiper slider for slider on more count item

Hi, great job

But I need to have a lot of tab titles for my design, so to handle this design on desktop and mobile (with dynamic tabs ) I need to have the titles as sliders as well.

After 1 hour I was able to combine the title of the tabs with the swiper slider, but the problem is that by changing the content the swiper tabs slider does not move and the active item is not specified, which confuses the user. Do you suggest a solution?

Lighthouse Best Practice error

Lighthouse throws an best practice error for the tabSlider script.

The error is on line 306/307 wich are

      const dragEvent = this.dragEvent.event();
      this.content.addEventListener(dragEvent.start, this.handlerStart);

A recommendation can be found here

How to prevent diagonal dragging event?

When drag diagonally it always switches tabs.
It should switch tabs only when drag horizontally left-right or right left.

Only allow vertical scrolling and horizontal sliding.

Is there a way to handle tab switching events by horizontal sliding only?

So in code, change this:

event.preventDefault();

to:

if (event.cancelable) event.preventDefault();

I have found it in: reference sources

Not implemented event for touch

tabs-slider/src/js/tabsSlider.js

Line 42 in e057f3c

leave: (this.hasTouch) ? 'touchleave' : 'mouseleave'

Remove banner style

Remove banner from style build.

Overflowing tabs scroller?

Compliment

Smooth, fast, and easy to implement. Great work, loved it!

Requirement

I have about 10 tabs that require to be scrolled in order for the hidden (out of the viewport) tabs to be visible. Anyway we can achieve this without overflow: auto since it is ugly on most browsers? It'd be great if we could slide past the current tabs and make visible the ones out of the viewport.

Problem with slide change or drag slide in RTL direction page

Hello
I have a website with 2 locale in English version(LTR) all right is ok but in Arabic/Persian/Kurdish version ( RTL ) design is ok but slider work with slide to left .

in RTL languages all things is RTL and user most slide ( drag , touch to right ) for change slides

for example owlcarousel2 handle this

https://owlcarousel2.github.io/OwlCarousel2/demos/rtl.html

how i can handle RTL slide change in youre lib ?

I have an idea for this like owlcarousel2 with param in option "rtl" : true/false