title: How to move a carousel item to the middle when it's clicked in jquery
body: <p>How can I make the carousel center the item I've clicked to the middle? I've looked everywhere for an answer but they're not straight answers... Can someone help me in this, please?</p>
  
  <p>This is what I've done so far: <a href="http://jsfiddle.net/sp9Jv/" rel="nofollow">http://jsfiddle.net/sp9Jv/</a></p>
  
  <p>HTML:  </p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="carousel"&gt;
          &lt;a href="#" class="prev"&gt;prev&lt;/a&gt;
          &lt;a href="#" class="next"&gt;next&lt;/a&gt;
  
          &lt;div class="viewport"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Un&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Deux&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Trois&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Quatre&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Cinq&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Six&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sept&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Huit&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- viewport --&gt;
  
      &lt;/div&gt;
      &lt;!-- carousel --&gt;
  &lt;/div&gt;
  &lt;!-- wrapper --&gt;
  </code></pre>
  
  <p>JavaScript:  </p>
  
  <pre><code>var carousel = $('#carousel'),
      prev = carousel.find('.prev'),
      next = carousel.find('.next'),
      viewport = carousel.find('.viewport'),
      item = viewport.find('li'),
      itemWidth = item.outerWidth(true),
      itemNum = item.length,
      itemList = viewport.find('ul');
  
  itemList.width(itemWidth * itemNum);
  
  var moveCarousel = function(dir) {
      itemList.animate({ left: '-=' + (itemWidth  * dir) + 'px' }, 400);  
  };
  
  //prev
  prev.on('click', function(e) {
      e.preventDefault();
      moveCarousel(-1);
  });
  
  //next
  next.on('click', function(e) {
      e.preventDefault();
      moveCarousel(1);
  });
  
  //carousel item
  item.on('click', 'a', function(e) {
      var self = $(this),
          selfIndex = self.index(),
          distance = itemList.width() / 2,
          selfPos = self.position(),
          selfPosLeft = selfPos.left,
          viewportPosLeft = viewport.position().left;
  
      e.preventDefault();
  
      //move item to middle, but it doesn't work... 
      if (selfPosLeft &gt; Math.floor(viewport.width())/3) {
          itemList.animate({ left: '-' + Math.floor(viewport.width())/3 + 'px' }, 400);
      }
  
      if (selfPosLeft &lt; Math.floor(viewport.width())/3) {
          itemList.animate({ left: Math.floor(viewport.width())/3 + 'px' }, 400);
      }
  });
  </code></pre>
  
  <p>CSS:  </p>
  
  <pre><code>#wrapper {
      width: 500px;
      margin: 20px auto;
  }
  #carousel {
      position: relative;
  }
  .viewport {
      width: 260px;
      border: 1px solid #6e6e6e;
      height: 80px;
      overflow: hidden;
      position: relative;
      margin-left: 100px;
  }
  .prev, .next {
      position: absolute;
  }
  .prev {
      top: 20px;
      left: 0;
  }
  .next {
      top: 20px;
      right: 0;
  }
  
  .viewport ul {
      position: absolute;
  }
  .viewport li {
      float: left;
      margin-right: 10px;
  }
  .viewport li a {
      display: block;
      width: 80px;
      height: 80px;
      background: #ddd;
  }
  </code></pre>