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="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



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.