JQuery Banner Slider With Tabs

This is a brief tutorial on making a tabbed banner slider in JQuery which allows images and content. These sliders are quite popular, especially with e-commerce sites, blogs and news sites, as they offer visitors a quick view on what's new.

Demo

The HTML

We use div tags for the main structure of the slider. This will allow us to insert anything into the div tags.

    <div class="wrapper">

        <div class="banner-wrapper">

            <div class="banner-inner">

                <div class="orange" data-title="Orange">
                    <div><h2>Hello</h2></div>
                </div>

                <div class="yellow" data-title="Yellow">
                    <div><h2>World</h2></div>
                </div>

                <div class="red" data-title="Red"></div>

                <div class="blue" data-title="Blue"></div>

                <div class="grey" data-title="Grey"></div>

            </div>

            <div class="banner-footer">

            </div>

        </div>

    </div>

The footer div is used to auto populate the tabs.

The CSS

Change the style as you see fit. For this demo we used simple divs with background colours.

    <style>
        b, body, html, div, ul, li, p, a, i, u {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #e8e8e8;
        }

        .wrapper {
            margin: 0 auto;
            width: 980px;
        }

        .hidden
        {
          display:none;
        }

        .banner-wrapper {
            width: 980px;
            height: 200px;
            position: relative;
        }

        .banner-inner {
            height:100%;
            width:980px;
            overflow:hidden;
            position:absolute;
        }

            .banner-inner .slider {
                position: absolute;
                width: 980px;
                height: 100%;
                -webkit-transition: 1s right, 1s left;
            }

        .activeSlider
        {
            left:0 !important;
        }

        .active
        {
            background-color:#333;
        }

        .orange {
            background-color: #ff6a00;
        }

        .yellow {
            background-color: #ffd800;
        }

        .red {
            background-color: #ff0000;
        }

        .blue
        {
            background-color:#045a86;
        }

        .grey
        {
            background-color:#808080;
        }

        .banner-footer {
            position: absolute;
            bottom: -30px;
            height: 30px;
            width: 100%;
            background-color: #0092dd;
        }

        .banner-footer ul
        {
            list-style-type:none;
        }

            .banner-footer ul li {
                display: inline-block;
                float: left;
            }

            .banner-footer ul li:last-child
            {
                margin-right:0;
            }
                .banner-footer ul li:last-child a
                {
                    border:none;
                }
                
                 .banner-footer ul li a {
                    padding: 5px 0px;
                    color: #fff;
                    text-decoration: none;
                    text-align: center;
                    display: block;
                    border-right: 1px solid #fff;
                }

                .banner-footer ul li a:hover{
                    background-color:#333;
                }

    </style>

The JQuery

The code has been commented so you can understand how it works.

    <script>
        $(document).ready(function () {

            //ON LOAD GET EACH DIV (ONLY FIRST DIVS NOT NESTED DIVS) AND SET LEFT INDEX TO -980PX
            //THE FIRST DIV WILL HAVE THE ACTIVESLIDER CLASS APPLIED ON LOAD SO IT'S VISIBLE..
            $('.banner-inner').children('div').addClass('slider').css('left', '-980px').eq(0).addClass('activeSlider').show();

            //THE FOOTER TABS ARE AUTOMATICALLY GENERATED..
            var footer = "<ul>";

            //GET THE AMOUNT OF SLIDERS WE HAVE..
            var SlidesCount = $('.banner-inner').children('div').length;
       
            $('.banner-inner').children('div').each(function () {

                //CALCULATE THE WIDTH (PS: IF YOU CHANGE WIDTH OF SLIDER MAKE SURE YOU CHANGE THE 980 TO YOUR DESIRED VALUE)..
                var Width = (980 / SlidesCount);

                //GET THE DATA 
                var dataTitle = $(this).attr('data-title');

                //WE SET EACH TABS ID TO THE DATA TITLE, PLUS FOR EACH TAB WE APPEND THE NEXT <LI> TO THIS VARIABLE
                footer += "<li style='width:" + Math.floor(Width) + "px'><a href='#' id='" + dataTitle + "'>" + dataTitle + "</a></li>";
       

            });

            //CLOSE THE LIST..
            footer += "</ul>";

            //ADD OUR TABS THE BANNER-FOOTER DIV..
            $('.banner-footer').html(footer);
            //FOR THE FIRST TAB ADD THE CLASS ACTIVE..
            $('.banner-footer ul li').eq(0).addClass('active');

            //WHEN A TAB IS CLICKED..
            $('.banner-footer ul li a').click(function () {

                //GET DATA TITLE..THIS IS TO MATCH THE CLICKED ELEMENTS ID TO THE DATA TITLE ATTRIBUTE OF THE SLIDER DIV..
                var getTitle = $(this).attr('id');

                //FOR THE PREVIOUS TAB REMOVE ITS ACTIVE CLASS
                $('.banner-footer ul li').removeClass('active');

                // THE ACTIVE CLASS TO THIS CLICKED DIV..
                $(this).parent().addClass('active');

                //THIS VARIABLE IS USED TO SLOW DOWN THE ANIMATION SO THE DIV APPEARING NOW AND THE DIV,
                //DISAPPEARING ARE IN SYNC, IF YOU REMOVE THIS YOU'LL UNDERSTAND WHAT I MEAN..
                var AnimationComplete = false;
                $('.banner-inner .slider').each(function () {

                    //NOW GO AROUND EACH SLIDER AND GET IT'S DATA-TITLE..
                    var Title = $(this).attr('data-title');

                    //IF THE DATA TITLE MATCHES CLICKED ELEMENTS ID IT'S NOW ACTIVE SLIDER..
                    if (Title == getTitle)
                    {
                        $(this).css('left', '0');
                        $(this).addClass('activeSlider');
                        AnimationComplete = true;
                        
                    }

                    //FOR PREVIOUS SLIDER REMOVE ACTIVESLIDER CLASS..
                    if (AnimationComplete)
                    {
                        if (Title != getTitle) {
                            $(this).css('left', '-980px');
                            $(this).removeClass('activeSlider');
                        }
                    }

      

                });

            });

        });
    </script>