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. 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.

<link rel="stylesheet" type="text/css" href="styles.css">
<script src=""></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>
              <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>

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


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.

  animation: true,
  autorotate: true,
  delay: 2000

It’ll rotate tabs automatically in every 2 seconds. See more examples:

See live demo and download source code.