How to Create Simple Auto Rotate Tabs In Jquery

by

Yet another jquery plugin tutorial which help you to make quick lightweight, easy to use, mobile-friendly auto rotate tabs in minutes.Tabs are useful to display content in categorized manner in minimum space with awesome performance. The plugin name is Tabslet. Which i am going to use to make auto rotate tabs. Tabslet Compatible with IE7+, Chrome, Firefox, Safari and jQuery 1.8.x, 1.9.x, 1.11.x, 1.12.x, 2.1.x, 2.2.x, 3.0.0, <= 3.1.1. auto-rotate-tabs
Tabslet Features:
* Flexible HTML structure
* Custom events
* Data attribute initialization and configuration
* Controls (next, previous)
* Rotation (usefull for banner rotators/carousels)
* Deep linking support
* Change tabs on mouse over
* Use animation effUse animation effect for tabs’ changing
* Ability to use either href or alt attribute to target tab
* Destroy and control (next, prev, show) methods


Plugin Integration

First of all include required libraries and dependencies on page.

Basic html to create tabs feature you can edit below html code as per your need but don’t forget to use same class as in javascript.


              
              
This is tab-1

              
This is tab-2

              
This is tab-3

              
This is tab-4




Finally make your tabs dynamic by adding tabslet() function in javascript.

$('.tabs').tabslet();

The above basic function will add simple tabs features on page, to make tabs automatically change, you need add few properties like you need to enable autorotate: true and set time interval.

It’ll rotate tabs automatically in every 2 seconds. See more examples: http://vdw.github.io/Tabslet/

See live demo and download source code.

DEMO || DOWNLOAD



Published by Rohit