A Tabbed Slider Using jQuery


Introduction

This article will show you how to create a tabbed Slider using jQuery step by step. Tabs are used for utilizing space efficiently and to provide some stylish effects in a website. jQuery tabs are very popular and they create a fancy look for web pages.

Description

Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion. By default a tab widget will swap between tabbed sections onClick but the events can be changed to onHover through an option. For my new looks I created a container which has the ability to switch content through tabs, but with an animation.

Step 1: First we have to create a Web Application.

  • Go to Visual Studio 2010.
  • New--> And select the Web Application.
  • Give whatever name you want to.
  • Click OK. 
img1.gif

Step 2: Secondly you have to add a new page to the website.

  • Go to the Solution Explorer.
  • Right-click on the project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK.

img2.gif

img3.gif

Step 3 :  In this step we are adding an image in the "Image" folder of the project.

img4.gif

Step 4 : In this step add the coda-slider-2.0.css and reset.css file to your Styles folder.

img5.gif

Right-click on the sagscroller.css and reset.css file respectively ->copy and paste to the <Head> section of your page. The reference path looks like:

<link rel="stylesheet" href="Styles/reset.css" type="text/css" media="screen" />
<
link rel="stylesheet" href="Styles/coda-slider-2.0.css" type="text/css" media="screen"
/>

Step 5: In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code:

img6.gif

Right-click on both files respectively -> copy and paste it inside <Head> section of your page; see step 7.

Step 6: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in <head> section or the <body> section as you prefer.

<script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
<
script type="text/javascript" src="Scripts/jquery.easing.1.3.js"></script>
<
script type="text/javascript" src="Scripts/jquery.coda-slider-2.0.js"></script>

Step 7: In this step we have to write the jQuery code which is given below.

<script type="text/javascript">
        $().ready(function () {
            $('#coda-slider-1').codaSlider();
        });
</
script>

Step 8: In this step you will see the body code of the Default2.aspx page which is given below.

Code:

<body class="coda-slider-no-js">
    <div class="coda-slider-wrapper">
        <div class="coda-slider preload" id="coda-slider-1">
            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">
                        Home</h2>
                    <p>
                        C# corner is a dynamic website with a single
                        goal in mind - to provide an online platform for Information Technology Developers
                        and Information Technology Professionals to exchange their knowledge and experience
                        by teaching and learning from one another by using various interactive online methods
                        such as contributing articles, discussion forums, blogs, and videos.</p>
                </div>
            </div>
            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">
                        About us</h2>
                    <p>
                        Hello and thank you for visiting the Mindcracker Network. The Mindcracker Network
                        with its global headquarters in Philadelphia, PA was founded in 1999 with a single
                        goal in mind - to provide an online platform for Information Technology Developers
                        and Information Technology Professionals to exchange their knowledge and experience
                        by teaching and learning from one another by using various interactive online methods
                        such as contributing articles, discussion forums, blogs, and videos.Today,
                        the Mindcracker Network serves over 4.0 million monthly users world-wide
                        and has become one of the most active social communities for Microsoft .NET
                        professionals.<a href="http://www.c-sharpcorner.com/Resources/AboutUs.aspx"></a> </p>
                </div>
            </div>
            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">
                        Jobs</h2>
                    <p>
                        Job Seekers <br />
                        Search available Jobs <br />
                        Post your Resume <br />
                        Sign-up for automatic email notifications <br />
                        Become a freelance consultant with us <br />
                        <a href="http://www.c-sharpcorner.com/jobs/"></a>
                        </p>
                </div>
            </div>
            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">
                        Login</h2>
                    <form runat="server">
                    Email &nbsp &nbsp &nbsp &nbsp &nbsp
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /><br />
                    Password &nbsp
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                    </form>
                </div>
            </div>
        </div>
    </div
>
</body>

Step 9: In this step we will see the complete code of the Default2.aspx page which is given below.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>A tabbed Slider Using JQuery</title>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="author" content="Niall Doherty" />
    <link rel="stylesheet" href="Styles/reset.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="Styles/coda-slider-2.0.css" type="text/css" media="screen" />
    <script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="Scripts/jquery.coda-slider-2.0.js"></script
>

<script type="text/javascript">
        $().ready(function () {
            $('#coda-slider-1').codaSlider();
        });
</
script>

<
/head>
<
body class="coda-slider-no-js">
    <div class="coda-slider-wrapper">
        <div class="coda-slider preload" id="coda-slider-1">
            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">
                        Home</h2>
                    <p>
                        C# corner is a dynamic website with a single
                        goal in mind - to provide an online platform for Information Technology Developers
                        and Information Technology Professionals to exchange their knowledge and experience
                        by teaching and learning from one another by using various interactive online methods
                        such as contributing articles, discussion forums, blogs, and videos.</p>
                </div>
            </div>
            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">
                        About us</h2>
                    <p>
                        Hello and thank you for visiting the Mindcracker Network. The Mindcracker Network
                        with its global headquarters in Philadelphia, PA was founded in 1999 with a single
                        goal in mind - to provide an online platform for Information Technology Developers
                        and Information Technology Professionals to exchange their knowledge and experience
                        by teaching and learning from one another by using various interactive online methods
                        such as contributing articles, discussion forums, blogs, and videos.Today,
                        the Mindcracker Network serves over 4.0 million monthly users world-wide
                        and has become one of the most active social communities for Microsoft .NET
                        professionals.<a href="http://www.c-sharpcorner.com/Resources/AboutUs.aspx"></a> </p>
                </div>
            </div>
            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">
                        Jobs</h2>
                    <p>
                        Job Seekers <br />
                        Search available Jobs <br />
                        Post your Resume <br />
                        Sign-up for automatic email notifications <br />
                        Become a freelance consultant with us <br />
                        <a href="http://www.c-sharpcorner.com/jobs/"></a>
                        </p>
                </div>
            </div>
            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">
                        Login</h2>
                    <form runat="server">
                    Email &nbsp &nbsp &nbsp &nbsp &nbsp
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /><br />
                    Password &nbsp
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                    </form>
                </div>
            </div>
        </div>
    </div
>
</body>
</html>

Step 10: In this step we will see the design of the Default2.aspx page which is given below.

img7.gif

Step 11: In this step we are going to run the Default2.aspx page by pressing F5.

img8.gif

Now see how to switch content using the tabs. Click on the next Tab.

img9.gif

img10.gif

img11.gif

You can also move the content using the right Button; see:

img8.gif

You can also move the content through right Button see.

img11.gif

Resources