Carousel with Pagination - Doesn't work yet

Carousel with Pagination - Doesn't work yet

by Nirvanachain

HTML

<!-- carousel -->
<div class="carousel">
    <div class="panels-container">
        <div class="panels">
            <div id="one">1</div>
            <div id="two">2</div>
            <div id="three">3</div>
        </div>
    </div>
    
    <!-- controls -->
    <ul class="controls">
        <li><a href="#" class="prev">prev</a></li>
        <li><a href="#one" data-target="one">1</a></li>
        <li><a href="#two" data-target="two">2</a></li>
        <li><a href="#three" data-target="three">3</a></li>
        <li><a href="#" class="next">next</a></li>     
    </ul>
    <!-- controls -->
</div>
<!-- carousel -->

CSS

.carousel {width: 866px; overflow: hidden;}

.panels-container {
    width: 5000px;
    background: #9BBBC7;
    border: 1px solid #555;

}

.panels div {
    border: 1px solid #777;
    background: #FFFF99;
    color: #555;
    float: left;
    font-size: 46pt;
    font-weight: bold;
    height: 333px;
    width: 864px;
}

/** CONTROLS */
.controls {
    position: absolute;
    bottom: 20px;
    left: 10px;
    overflow:hidden;
}
.controls li {
    background: #E0D1CC;
    border: 1px solid #777;
    float: left;
    margin-right: 20px;
    text-align: center;
    width: 70px;
}

.controls li a {
    color: #555;
    display: block;
    padding: 5px;
    text-decoration: none;
}

.current { /** Highlight the tab that is currently selectied by class current **/
    color:#FFFFFF!important;
    background: #00FFCC!important;  
}

JavaScript

$(document).ready(function() {
    var panelsList = $('.panels'),
        panel = panelsList.find('div'),
        panelWidth = panel.outerWidth(true),
        panelsNum = panel.length,
        controls = $('.controls'),
        currPanel = panelsList.find('div:first-child');

    panelsList.width(panelWidth * panelsNum);

    // controls
    controls.on('click', 'a[data-target]', function(e) {

        var self = $(this),
            selfPos = self.index(),
            self_href = $(self).attr('href'),
            self_href_pos = $(self_href).index(),
            scroll_position = self_href_pos * panelWidth;

        e.preventDefault();

        $(self_href).parents('.carousel').animate({
            scrollLeft: scroll_position
        }, 1000);
  
        panel.removeClass('active');
        $(self_href).addClass('active');

    });
    
    //Scroll automatically
    //Does not work.
    setInterval(function() {
        $(self_href).parents('.carousel')
        .fadeOut(100)
        .next()
        .fadeIn(100)
        .end()
        .appendTo('.carousel');
        }, 500);
});