jquery herotabs

HTML

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/2.1.2/normalize.css">
        <h1>PRZYJECIA OKOLICZNOSCIOWE</h1>
        <p>Check <a href="http://github.com/simonsmith/jquery.herotabs">the GitHub page</a> for documentation</p>

        <hr>

        <h2>Example 1</h2>
        <p>Uses a delay and fade effect. Will pause tab cycling whilst hovered or focused.</p>
        <div class="tabs tabs-horiz">
            <ul class="tab-nav js-nav">
                <li class="tab-nav-item js-nav-item"><a href="#ex1-tab1">First tab</a></li>
                <li class="tab-nav-item js-nav-item"><a href="#ex1-tab2">Second tab</a></li>
                <li class="tab-nav-item js-nav-item"><a href="#ex1-tab3">Third tab</a></li>
                <li class="tab-nav-item js-nav-item"><a href="#ex1-tab4">Fourth tab</a></li>
            </ul>
            <div class="tab-pane js-tab" id="ex1-tab1">
                <img src="http://lorempixel.com/600/250/sports/2" alt="">
                <div class="tab-info">
                    <p>Some info about this item. <a href="#">A link to focus</a></p>
                </div>
            </div>
            <div class="tab-pane js-tab" id="ex1-tab2">
                <img src="http://lorempixel.com/600/250/fashion/2" alt="">
            </div>
            <div class="tab-pane js-tab" id="ex1-tab3">
                <img src="http://lorempixel.com/600/250/transport/1" alt="">
                <div class="tab-info">
                    <p>Some info about this item <a href="#">A link to focus</a></p>
                </div>
            </div>
            <div class="tab-pane js-tab" id="ex1-tab4">
                <img src="http://lorempixel.com/600/250/nature/2" alt="">
            </div>
        </div>

        <hr>

        <h2>Example 2</h2>
        <p>Uses hover to switch tabs</p>

        <div class="tabs tabs-vert">
            <ul class="tab-nav js-nav">
                <li class="tab-nav-item js-nav-item"><a...

CSS

/*
    Default
    -----------------------------
*/
body {
    width: 600px;
    margin: 30px auto 60px;
}

a:focus {
    outline: red 2px dotted;
}

ul {
    margin: 0;
    padding: 0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}



/*
    Common tab styles
    -----------------------------
*/
.tab-nav {
    margin: 0;
}

.tab-pane {
    position: relative;
}

.tab-nav li {
    margin-bottom: 5px;
}

.tabs {
    width: 600px;
}

.tabs .tab-info {
    padding: 10px 10px;
    background-color: #333;
    background-color: rgba(0, 0, 0, .7);
    border-radius: 5px;
    color: #fff;
}

.tabs .tab-info p {
    margin: 0;
}

.tabs .tab-info a {
    color: inherit;
}

.tabs-horiz .tab-nav,
.tabs-vert .tab-nav {
    list-style-type: none;
}

.tab-container {
    height: 250px;
    overflow-y: scroll;
    overflow-x: auto;
}

.is-active .tab-container {
    height: auto;
    overflow: visible;
}


/*
    Tabs horizontal
    -----------------------------
*/
.tabs-horiz .tab-info {
    position: absolute;
    top: 15px;
    right: 15px;
}

.tabs-horiz.is-active .tab-nav {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 5;
}

.tabs-horiz.is-active .tab-nav-item {
    display: inline-block;
    margin-right: 3px;
}

.tabs-horiz.is-active .tab-nav-item a {
    background-color: #fff;
    border: 1px solid #444;
    border-radius: 50%;
    text-indent: -9999px;
    width: 15px;
    height: 15px;
    display: block;
}

.tabs-horiz.is-active .tab-nav-current a {
    background-color: #ff6d3a;
}



/*
    Tabs vertical
    -----------------------------
*/
.tabs-vert .tab-info {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.tabs-vert.is-active .tab-nav {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
}

.tabs-vert.is-active .tab-nav-item {
    list-style-type: none;
    margin-bottom: 8px;
}

.tabs-vert.is-active .tab-nav-item a {
   ...

JavaScript

/*!
 * jquery.herotabs
 * version 1.2.1
 * Requires jQuery 1.7.0 or higher
 * https://github.com/simonsmith/jquery.herotabs/
 * @blinkdesign
 */

!function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(root.jQuery);
    }
}(this, function($) {
    'use strict';

    var instanceId = 0;
    var defaults = {
        delay: 0,
        duration: 0,
        easing: 'ease-in-out',
        startOn: 0,
        reverse: false,
        interactEvent: 'click',
        useTouch: true,
        onSetup: null,
        onReady: null,
        css: {
            active: 'is-active',
            current: 'tab-current',
            navCurrent: 'tab-nav-current',
            navId: 'tabnav'
        },
        selectors: {
            tab: '.js-tab',
            nav: '.js-nav',
            navItem: '.js-nav-item'
        },
        zIndex: {
            bottom: 1,
            top: 2
        }
    };

    var Herotabs = function(container, options) {
        this.container = container;
        this.options = options;
        this._currentTab = null;
        this._timer = null;
        this._instanceId = ++instanceId;
        this._opacityTransition = 'opacity ' + (parseInt(options.duration, 10) / 1000) + 's ' + options.easing;

        typeof options.onSetup == 'function' && options.onSetup.call(this);

        this._getDOMElements();

        if (this.nav.length > 0) {
            this._ariafy();
            this._setCurrentNav();
            this._attachNavEvents();
        }

        this._showInitialTab(options.startOn);
        this._attachKeyEvents();

        // Begin cycling through tabs if a delay has been set
        if (parseInt(options.delay, 10) > 0) {
            this.start();
            this._attachHoverEvents();
        }

        container.addClass(options.css.active);
        container[0].style.position = 'relative';

        typeof options.onReady == 'function' &&...