How to Create Simple Auto Rotate Tabs In Jquery
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.
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.
<link rel="stylesheet" type="text/css" href="styles.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.tabslet.min.js"></script> |
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.
<div class='tabs tabs_active'> <ul class='horizontal'> <li><a href="#tab-1">Tab-1</a></li> <li><a href="#tab-2">Tab-2</a></li> <li><a href="#tab-3">Tab-3</a></li> <li><a href="#tab-4">Tab-4</a></li> </ul> <div id='tab-1'><span>This is tab-1</span></div> <div id='tab-2'><span>This is tab-2</span></div> <div id='tab-3'><span>This is tab-3</span></div> <div id='tab-4'><span>This is tab-4</span></div> </div> </div> |
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.
<script> $(function(){ $('.tabs').tabslet({ animation: true, autorotate: true, delay: 2000 }); }); </script> |
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