Creating your own customizable tabs / carousel plugin for jQuery

Yesterday I was browsing the web for a tabs or carousel plugin for jQuery that fitted my needs. I wanted a simple but highly customizable control for displaying tabs which could also automatically page like a carousel. I found a lot of different plugins for JQuery but none fitted my exact needs. So I created my own in only 17 lines of javascript. this blog post describes how I did it and how you can use it on your website.

 

first of all of course is a demo. You can can check it here: http://www.vdcruijsen.net/demo/jquerycarousel/carouseldemo.html

so how does this work? We’ll start with the HTML used for the carousel:

<div id="carousel">

    <div class="carouselbody">

        <ul class="carouselcontainer">

            <li class="page"><div style="width:400px; height:300px; background-color:Green">test tab 1</div></li>                           

            <li class="page"><div style="width:400px; height:300px; background-color:Red">test tab 2</div></li>                           

            <li class="page"><div style="width:400px; height:300px; background-color:Orange">test tab 3</div></li>                           

            <li class="page"><div style="width:400px; height:300px; background-color:Blue">test tab 4</div></li>

        </ul>

    </div>

    <ul class="pager">

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

    </ul>

</div>

The HTML is actually pretty easy, The first div is a container with an id called carousel so the script knows what belongs to the carousel and what not. you can set a height and width on this div to size your carousel. The carousel div contains 2 main parts. the carouselbody a container for all the carousel pages and the pager where you can define your pager links. this pager can also be put before the carouselbody if you want the pager or tabs above your pages.

The carouselbody has a unordered list containing all the actual pages. all the list items are shown have a css class called page so the script knows that inside is the content for a page. in the list item I’ve put some div with inline styling to show that you can put whatever you want inside this page list item.

the pager has links which have a pagerpage class. the script will automatically match the first available pagerpage link to the first page etc.

Below is the css I used in the demo. you can customize this to set pictures for the paging mechanism or set heights, colors etc. this current css is just an example. (some display elements are needed though, its best to start of with the supplied css and change it to your likings.)

#carousel { height: 400px; overflow:hidden; }

#carousel .carouselbody { float: left; width: 400px; height: 360px; overflow: hidden; position: relative; background-color:#212020;}

#carousel .carouselcontainer { list-style: none; padding: 0px; margin: 0px;  position: absolute; left: 0; top: 0; }

#carousel .carouselcontainer li{ float: left; margin: 0px ; border-width: 0px;}

 

#carousel .pager { overflow:hidden; list-style: none; clear: both; }

#carousel .pager li { float: left; }

 

#carousel .page

{

    display:none;

}

 

#carousel .currentpage

{

    display:block;

}

 

#carousel .pagerpage

{

    margin-left:2px;

    background-image:url('/Content/images/pager2.png');

    width: 20px;

    height: 20px;

    display:block;

    text-decoration:none;

}

#carousel .currentpagerpage

{

    background-image:url('/Content/images/pager.png');

    text-decoration:none;

}

 

So now the HTML and CSS is explained its on to the actual jQuery script which makes all this magic happen. You only need 1 line to change a div to a working carousel if you also include the other script pieces somewhere on the page. the line to add in your script that is executed on document.ready is the following:

$("#carousel").carousel();

 

this method will of course only work if the carousel method is available. This is added through the following code:

$.fn.carousel = function (options) {

    var defaults = {

        start: 0

    };

    var options = $.extend(defaults, options);

 

    $(this).find(".page:eq(" + (options.start) + ")").addClass("currentpage");

    $(this).find(".pagerpage:eq(" + (options.start) + ")").addClass("currentpagerpage");

 

    $(this).find(".pagerpage").bind("click", function () {

        $(this).parents(".pager").find(".currentpagerpage").removeClass("currentpagerpage");

        $(this).parents("#carousel").find(".currentpage").removeClass("currentpage");

        $(this).addClass("currentpagerpage");

        var index = $(this).parent().index();

        $(this).parents("#carousel").find(".page:nth-child(" + (index + 1) + ")").addClass("currentpage");

    });

};

 

the $.fn.carousel line makes the carousel method available in the rest of your jQuery code. I’ve added some options as an example to make the carousel start at a different page.

the first thing the script does is searching for the page on which it should start and adds the currentpage css class to this page so the page becomes visible. The script does the same for the active pager item.

after this the script binds click events to the pager links so the pager links can do their work when they are clicked. on each click event the current page is made invisible by removing the currentpage css class and after it puts the current page css class on the newly selected page.. that’s all :)

 

Hopefully this code is something you can use on your own website or otherwise learn from it or use pieces of it.

 

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter