Tab Slider Plugin

The tabSlide plugin — a flexible jQuery tab/slider component that animates between panels, supports auto-play, and can be linked to external navigation elements.

View Demo

Basic Setup

<div id="tabs-container">
    <ul class="tab-nav">
        <li class="tab active"><a href="#">Tab 1</a></li>
        <li class="tab"><a href="#">Tab 2</a></li>
        <li class="tab"><a href="#">Tab 3</a></li>
    </ul>
    <div class="tab-panels">
        <div class="panel">Content for tab 1</div>
        <div class="panel">Content for tab 2</div>
        <div class="panel">Content for tab 3</div>
    </div>
</div>

$(document).ready(function() {
    $('#tabs-container').tabSlide({
        navSelector: '.tab',
        panelSelector: '.panel',
        activeClass: 'active',
        speed: 300,
        easing: 'easeOutQuad',
        auto: true,
        autoDelay: 4000,
        resumeAuto: true
    });
});

Parameters

• navSelector — selector for tab navigation items
• panelSelector — selector for panel elements
• activeClass — class applied to the active tab (and its parent li)
• speed — transition animation speed in ms
• easing — jQuery easing function name
• auto — enable auto-play
• autoDelay — delay between auto transitions in ms
• resumeAuto — resume auto-play after manual interaction

The plugin handles tabs of different heights gracefully and supports keyboard navigation.