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

Sponsored Links

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>