Customize Your Slider Tabs with jQuery
Step 1: Adding the Necessary Files
To get started, extract the package into your project directory and include the following files in the head section of your HTML. Remember to ensure jQuery is included before the plugin.
<head>
<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>
</head>
Step 2: Structuring Your Tabs
Create a div element that contains an unordered list of tab links followed by corresponding div elements for panels. Ensure the href attribute of the tab links points to the respective panel's ID. Even if you don't plan on using tabs, include this markup for necessary plugin functionality like indicators. Here's a basic example:
<div id="mySliderTabs">
<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>
<div id="canyon">
<h3>The Grand Canyon</h3>
<!-- Panel content here -->
</div>
<div id="taj">
<h3>The Taj Mahal</h3>
<!-- Panel content here -->
</div>
<div id="bigben">
<h3>Big Ben</h3>
<!-- Panel content here -->
</div>
</div>
Step 3: Activating the Plugin
Select the container div using jQuery and apply the sliderTabs() function to initialize the slider tabs.
var slider = $("div#mySliderTabs").sliderTabs();
... or configure additional options. Refer to the next section for a complete list of available settings.
var slider = $("div#mySliderTabs").sliderTabs({
autoplay: true,
mousewheel: false,
position: "bottom"
});
Learn more about Slider Tabs
Download the Plugin