SliderTabs - A flexible jQuery plugin for sliding tabs

SliderTabs is a flexible, super simple 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

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: opatin.github.io

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="styles/jquery.sliderTabs.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.sliderTabs.min.js"></script>

2. HTML

First make a div element including first a list of links for tabs and the same number of div elements afterwards for panels. To link the div panels to the tabs, make sure that the href attribute of the tab links is '#IdOfPanel'. Note that list of tabs is required markup even if you plan on disabling tabs as other parts of the plugin like indicators depend on these declarations. 

<div id="mySliderTabs">
  <!-- Unordered list representing the tabs -->
  <ul>
    <li><a href="#canyon">The Grand Canyon</a></li>
    <li><a href="#taj">The Taj Mahal</a></li>
    <li><a href="#bigben">Big Ben</a></li>
  </ul>

  <!-- Afterwards, include the div panels representing the panels of our slider -->
  <div id="canyon">
    <h3>The Grand Canyon</h3>
    <!-- rest of the panel content -->
  </div>
  <div id="taj">
    <h3>The Taj Mahal</h3>
    <!-- rest of the panel content -->
  </div>
  <div id="bigben">
    <h3>Big Ben</h3>
    <!-- rest of the panel content -->
  </div>
</div>

3. JAVASCRIPT

var slider = $("div#mySliderTabs").sliderTabs({
  autoplay: true,
  mousewheel: false,
  position: "bottom"
});

4. OPTIONS

{
  leftTabArrow: '',
  panel: '',
  panelActive: '',
  panelsContainer: '',
  rightTabArrow: '',
  tab: '',
  tabActive: '',  
  tabsList: ''
}