jQuery: handling featured content

by lovromar

HTML

<div id="nav"></div>

<div id="featured">
  <div id="featured-wrapper">
    <ul class="featured-list">
        <li>
            <div class="featured">
                <h3>Featured #1</h3>
                <p>Lorem ipsum dolor.</p>
            </div>
            <div class="featured">
                <h3>Featured #2</h3>
                <p>Lorem ipsum dolor.</p>
            </div>
        </li>
        <li>
            <div class="featured">
                <h3>Featured #3</h3>
                <p>Lorem ipsum dolor.</p>
            </div>
            <div class="featured">
                <h3>Featured #4</h3>
                <p>Lorem ipsum dolor.</p>
            </div>
        </li>
        <li>
            <div class="featured">
                <h3>Featured #5</h3>
                <p>Lorem ipsum dolor.</p>
            </div>
            <div class="featured">
                <h3>Featured #6</h3>
                <p>Lorem ipsum dolor.</p>
            </div>
        </li>
    </ul>
    <ul class="featured-list">
        <li>
            <div class="featured">
                <h3>Featured #7</h3>
                <p>Lorem ipsum dolor.</p>
            </div>
            <div class="featured">
                <h3>Featured #8</h3>
                <p>Lorem ipsum dolor.</p>
            </div>
        </li>
        <li>
            <div class="featured">
                <h3>Featured #9</h3>
                <p>Lorem ipsum dolor.</p>
            </div>
            <div class="featured">
                <h3>Featured #10</h3>
                <p>Lorem ipsum dolor.</p>
            </div>
        </li>
        <li>
            <div class="featured">
                <h3>Featured #11</h3>
                <p>Lorem ipsum dolor.</p>
            </div>
            <div class="featured">
                <h3>Featured #12</h3>
                <p>Lorem ipsum dolor.</p>
            </div>
        </li>
    </ul>
    <ul class="featured-list">
        <li>
            <div class="featured">
   ...

CSS

#featured {
    width: 600px;
    margin: 2em auto;
      overflow: hidden;
}

#featured-wrapper {
  
    position: relative;
}

ul.featured-list {
    width: 600px;
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.featured-list li {
    overflow: hidden;
    padding-bottom: 1em;
    border-bottom: 1px solid #c0c0c0;
    margin-bottom: 1.2em;
}

ul.featured-list li div.featured {
    width: 260px;
    height: 10em;
    padding: 5px 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f5f5f5;
    float: left;
}

ul.featured-list li div.featured:last-child {
    margin-left: 24px;
    margin-right: 0;
}

ul.featured-list li div.featured h3 {
    font-size: 1.3em;
    font-family: Impact, sans-serif;
    text-transform: uppercase;
    margin-bottom: 0.3em;
}

#nav {
    width: 600px;
    margin: 2em auto 0 auto;
    text-align: center;
}

#nav a {
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2;
    text-align: center;
    background: #333;
    text-decoration: none;
    color: #fff;
    margin-right: 0.5em;
}
 

#nav a.active {
    background: #f90;
}

JavaScript

var FeaturedSlider = new

function() {

    var slider = document.getElementById('featured'),
        lists = $('ul.featured-list', slider),
        wrapper = $('#featured-wrapper', slider);

    var setWrapper = function() {

        wrapper.css('width', lists.eq(0).width() * lists.length);

    };

    var createNav = function() {

        var len = lists.length,
            i;

        for (i = 0; i < len; i++) {

            var first = (i == 0) ? ' class="active"' : '';

            $('#nav').append('<a href="#"' + first + ' data-rel="' + i + '">' + (i + 1) + '</a>');

        }

    };

    var navigate = function() {
        $('a', '#nav').click(function(e) {
            e.preventDefault();
            var a = $(this);
            if (a.hasClass('active')) {
                return;
            }
            var rel = a.attr('data-rel');
            wrapper.animate({
                left: -lists.eq(rel).position().left
            }, 1000, function() {

                a.addClass('active').siblings().removeClass('active');

            });
        });
    };



    this.init = function() {

        setWrapper();
        createNav();
        navigate();

    };


}();


FeaturedSlider.init();