SliderTabs is a flexible jQuery plugin for sliding tabs.
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!
- 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
- Vertical tabs
- AJAX loading
Only 3 files are required to use SliderTabs. One of which is jQuery so in the <head> section of your website, include the jQuery and SliderTabs scripts
As well as the jquery.sliderTabs.css stylesheet included in the styles folder
<link rel="stylesheet" href="styles/jquery.sliderTabs.min.css">
Now you're ready to build your first SliderTab!
SliderTabs is pretty easy to use. First create a <div> element with a <ul> containing x amount of tabs, and x <div> elements after that as the associated panels. Note that the href attribute of the tab links must be of the format #Id-of-panel-div to link tabs to their content panels. The complete HTML markup should look similar to below.
<div id="mySliderTabs">
<ul>
<li><a href="#theOffice">The Office</a></li>
<li><a href="#parks">Parks and Recreation</a></li>
<li><a href="#southPark">South Park</a></li>
</ul>
<div id="theOffice">
<h3>Info about The Office</h3>
<p>Aoapsinasof asghais fnasof ws9ufh isujn asiufhasiufasdf aoisufd asfdhasifd usdhf saiudfh</p>
<p>Aoapsinasof asghais fnasof ws9ufh isujn asiufhasiufasdf aoisufd asfdhasifd usdhf saiudfh</p>
<p>Aoapsinasof asghais fnasof ws9ufh isujn asiufhasiufasdf aoisufd asfdhasifd usdhf saiudfh</p>
</div>
<div id="parks">
<h3>Info about Parks and Recreation</h3>
<p>Aoapsinasof asghais fnasof ws9ufh isujn asiufhasiufasdf aoisufd asfdhasifd usdhf saiudfh</p>
</div>
<div id="southPark">
<h3>Info about South Park</h3>
<p>Aoapsinasof asghais fnasof ws9ufh isujn asiufhasiufasdf aoisufd asfdhasifd usdhf saiudfh</p>
</div>
</div>
Then call sliderTabs() on the div you just created like below.
$("#mySliderTabs").sliderTabs();
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent