Question

How can I make pagination in my carousel, sometimes they’re in dots, numbers, etc. I want them to link the their appropriate slide-item. So for example if I click number 3, then the 3rd slide-item should slide to the viewport and so on. No plugin please, as I’m learning how to write javascript.

JS:

var panelsList = $('.panels'),
    panel = panelsList.find('li'),
    panelWidth = panel.outerWidth(true),
    panelsNum = panel.length,
    controls = $('.controls'),
    currPanel = panelsList.find('li: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();

   e.preventDefault();

   /** slide the corresponding item to viewport: 
    * this is where I'm stuck... I don't know what to do
    */
   self_href.parent().animate({ marginLeft: '-=' + self_href_pos * panelWidth + 'px' });

   panel.removeClass('active');
   self_href.addClass('active');

});

HTML:

<!-- carousel -->
<div class="carousel">
    <div class="fenetre">
        <ul class="panels">
            <li id="one">1</li>
            <li id="two">2</li>
            <li id="three">3</li>
            <li id="four">4</li>
            <li id="five">5</li>
        </ul>
    </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="#four" data-target="four">4</a></li>
        <li><a href="#five" data-target="five">5</a></li>
        <li class="last"><a href="#" class="next">next</a></li>
    </ul>
    <!-- controls -->
</div>
<!-- carousel -->

CSS:

.fenetre {
    width: 866px;
    background: #9BBBC7;
    border: 1px solid #555;
    overflow: hidden;
}

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

/** CONTROLS */
.controls {
    margin-top: 20px;
    margin-left: 125px;
}
.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;
}

Many thanks.

Answer 1

I moved your code around a tiny bit:
http://jsfiddle.net/bew6Z/
I hope it’s what you were going for

// 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();
    console.log(self, selfPos, self_href, self_href_pos, scroll_position);

    /** slide the corresponding item to viewport:
     * this is where I'm stuck... I don't know what to do
     */

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

    panel.removeClass('active');
    $(self_href).addClass('active');

});