Automatic slider

by Rembrand

HTML

<section id="spotlight" class="col col-2">
                    
    <h1 class="hide">In de kijker</h1>
    
    <ol class="controls">
        <li>
            <a class="next" href="#spotlight-1" title="Nationale Groei Mee dag"></a>
            <div class="description">
                <h3>Tincidunt cursus</h3>
                <h4>Nationale actiedag op 16/05/2011</h4>
                <p>ultricies pulvinar velit magna in natoque dolor mattis nascetur odio, arcu nisi magnis platea. Tempor, magna…</p>
                <a href="#" class="more">Lees meer</a>
            </div><!-- //slide-description -->
        </li>
        <li>
            <a class="next" href="#spotlight-2" title="Tincidunt cursus"></a>
            <div class="description">
                <h3>Tincidunt cursus</h3>
                <h4>Nationale actiedag op 16/05/2011</h4>
                <p>ultricies pulvinar velit magna in natoque dolor mattis nascetur odio, arcu nisi magnis platea. Tempor, magna…</p>
                <a href="#" class="more">Lees meer</a>
            </div><!-- //slide-description -->
        </li>
        <li>
            <a class="next" href="#spotlight-3" title="Pulvinar porttitor"></a>
            <div class="description">
                <h3>Pulvinar porttitor</h3>
                <h4>Nationale actiedag op 16/05/2011</h4>
                <p>Elementum turpis etiam? Odio cum est dapibus in urna vel est augue dapibus arcu natoque nunc amet enim magna, urna …</p>
                <a href="#" class="more">Lees meer</a>
            </div><!-- //slide-description -->
        </li>
    </ol>
    
    <div id="spotlight-description"></div>
    
    <div class="spotlight-wrapper">
        <div class="spotlight-inner">
            <div id="spotlight-1" class="spotlight">
                <img src="http://dummyimage.com/590x280/96835e/cccccc.jpg" alt="" />
            </div>
            <div id="spotlight-2" class="spotlight">
                <img...

CSS

#spotlight {
    position: relative;
    padding-bottom: 30px;
    height: 280px;
    background-color: #fff;
}

.spotlight-wrapper {
    position: relative;
    height: 280px;
    width: 590px;
    overflow: hidden;
}

.spotlight-inner {
    position: relative;
    height: 280px;
    width: 9999px;
}

.spotlight,
.spotlight img {
    position: relative;
    float: left;
    display: inline;
}

#spotlight-description {
    position: absolute;
    top:  20px;
    left: -20px;
    padding: 18px 20px;
    width: 280px;
    height: 137px;
    color: #fff;
    background-color: #333;
    z-index: 2;
}

#spotlight .more {
    color: #fff;
    background-position: -1030px bottom;
}

#spotlight-description h3,
#spotlight-description h4 {
    margin-bottom: 2px;
    font-size: 18px;
    line-height: 1.2em;
    text-transform: uppercase;
    color: #fff;
}

#spotlight-description h4 {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: normal;
}

#spotlight-description p {
    margin-bottom: 5px;
}

#spotlight .controls {
    position: absolute;
    z-index: 3;
    right: 302px;
    bottom: 130px;
}

#spotlight .controls li,
#spotlight .controls a {
    display: inline;
    float: left;
    height: 10px;
    width: 10px;
    overflow: hidden;
}

#spotlight .controls li {
    margin-left: 5px;
}

#spotlight .controls a {
    text-indent: -9999px;
    overflow: hidden;
    background-color: black;
}

#spotlight .controls a:hover,
#spotlight .controls li.selected a {
    background-color: white;
}

.spotlight-wrapper .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 590px;
    height: 280px;
    background-position: -1030px top;
    z-index: 1;
}


#spotlight .description {
    position: absolute;
    left: -9999px;
}

JavaScript

var frontend = {
    init: function()
    {

        // Initialize spotlight
        this.spotlight.init();
        
    },

    spotlight: {
            i: 0,
           timeOutSpotlight: null,
        
           init: function()
           {
               $('#spotlight .controls a.next').click(function(e) {
                        
                   // Get container
                   var c = frontend.spotlight;
        
                   // Li parent()
                   $li = $(this).parent();
        
                   // Current index
                   var currIndex = $li.index();
                                  
                   // Set index to currentItem
                   c.i = currIndex;
                   
                   var itemWidth = 590;
                   
                   var stripPosition = {
                           // scroll through the strip
                           scrollStrip : function(currIndex)
                           {
                               var scrollToVal;
                               scrollToVal = -(itemWidth * currIndex) + 'px';
                               
                               $('.spotlight-inner')
                                   .animate(
                                       { left: scrollToVal },
                                       {duration: 'slow'}
                                   )
                               ;
                           }
                   };
        
                   // Reset selected states
                   $('#spotlight li').removeClass('selected');
        
                   // Set selected state for current item
                   $li.addClass('selected');
                   
                   $description = $li.find('.description').html()
                        
                   // Change description text
                   $('#spotlight-description').html($description);
                   
                   //Scroll the strip
      ...