title: javascript/jquery: how to make pagination in carousel (i.e. numbers
body: <p>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.</p>
  
  <p>JS:</p>
  
  <pre><code>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');
  
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- carousel --&gt;
  &lt;div class="carousel"&gt;
      &lt;div class="fenetre"&gt;
          &lt;ul class="panels"&gt;
              &lt;li id="one"&gt;1&lt;/li&gt;
              &lt;li id="two"&gt;2&lt;/li&gt;
              &lt;li id="three"&gt;3&lt;/li&gt;
              &lt;li id="four"&gt;4&lt;/li&gt;
              &lt;li id="five"&gt;5&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;!-- controls --&gt;
      &lt;ul class="controls"&gt;
          &lt;li&gt;&lt;a href="#" class="prev"&gt;prev&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#one" data-target="one"&gt;1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#two" data-target="two"&gt;2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#three" data-target="three"&gt;3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#four" data-target="four"&gt;4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#five" data-target="five"&gt;5&lt;/a&gt;&lt;/li&gt;
          &lt;li class="last"&gt;&lt;a href="#" class="next"&gt;next&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- controls --&gt;
  &lt;/div&gt;
  &lt;!-- carousel --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Many thanks.</p>