Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

SliderTabs - A flexible, super simple jQuery plugin for sliding tabs.

branch: master

This branch is 0 commits ahead and 0 commits behind master

Fetching latest commit…

Cannot retrieve the latest commit at this time

README.md

jQuery SliderTabs

SliderTabs is a flexible jQuery plugin for sliding tabs.

Why?

The goal of SliderTabs isn't to pollute the jQuery world with another tabs plugin but to create the possibility to build tabs, slideshows, featured content sliders, and more with one plugin. I hope this will be the last plugin you'll need to create slider type widgets. It's a pretty new project so please let me know of any bugs or suggestions on the issues page!

Features

  • Fully customizable with CSS
  • Multiple panel transition effects
  • Auto height adjustment
  • Responsive design to spontaneous size changes
  • Multiple instances
  • Cross browser compatible
  • Autoplay
  • Mousewheel integration

To do

  • Vertical tabs
  • AJAX loading

Setup

Only 3 files are required to use SliderTabs. One of which is jQuery so in the <head> section of your website, include the jQuery and SliderTabs scripts

As well as the jquery.sliderTabs.css stylesheet included in the styles folder

<link rel="stylesheet" href="styles/jquery.sliderTabs.min.css">

Now you're ready to build your first SliderTab!

Usage

More Examples

SliderTabs is pretty easy to use. First create a <div> element with a <ul> containing x amount of tabs, and x <div> elements after that as the associated panels. Note that the href attribute of the tab links must be of the format #Id-of-panel-div to link tabs to their content panels. The complete HTML markup should look similar to below.

<div id="mySliderTabs">
      <ul>
        <li><a href="#theOffice">The Office</a></li>
        <li><a href="#parks">Parks and Recreation</a></li>
        <li><a href="#southPark">South Park</a></li>
      </ul>
      <div id="theOffice">
        <h3>Info about The Office</h3>
        <p>Aoapsinasof asghais fnasof ws9ufh isujn asiufhasiufasdf aoisufd asfdhasifd usdhf saiudfh</p>
        <p>Aoapsinasof asghais fnasof ws9ufh isujn asiufhasiufasdf aoisufd asfdhasifd usdhf saiudfh</p>
        <p>Aoapsinasof asghais fnasof ws9ufh isujn asiufhasiufasdf aoisufd asfdhasifd usdhf saiudfh</p>
      </div>
      <div id="parks">
        <h3>Info about Parks and Recreation</h3>
        <p>Aoapsinasof asghais fnasof ws9ufh isujn asiufhasiufasdf aoisufd asfdhasifd usdhf saiudfh</p>
      </div>
      <div id="southPark">
        <h3>Info about South Park</h3>
        <p>Aoapsinasof asghais fnasof ws9ufh isujn asiufhasiufasdf aoisufd asfdhasifd usdhf saiudfh</p>
      </div>
  </div>

Then call sliderTabs() on the div you just created like below.

$("#mySliderTabs").sliderTabs();

View all options.

Something went wrong with that request. Please try again.