jaroeryでクリックしたときにカルーセルアイテムを中央に移動する方法

Question

カルーセルの中央をクリックして中央に移動させるにはどうしたらいいですか？私はどこでも答えを探しましたが、彼らはまっすぐな答えではありません...誰かが私を助けてくれますか？

これは私がこれまで何をやったかである：http://jsfiddle.net/sp9Jv/

HTML：

<div id="wrapper"> 
    <div id="carousel"> 
     <a href="#" class="prev">prev</a> 
     <a href="#" class="next">next</a> 

     <div class="viewport"> 
      <ul> 
       <li><a href="#">Un</a></li> 
       <li><a href="#">Deux</a></li> 
       <li><a href="#">Trois</a></li> 
       <li><a href="#">Quatre</a></li> 
       <li><a href="#">Cinq</a></li> 
       <li><a href="#">Six</a></li> 
       <li><a href="#">Sept</a></li> 
       <li><a href="#">Huit</a></li> 
      </ul> 
     </div> 
     <!-- viewport --> 

    </div> 
    <!-- carousel --> 
</div> 
<!-- wrapper --> 

はJavaScript：

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 > Math.floor(viewport.width())/3) { 
     itemList.animate({ left: '-' + Math.floor(viewport.width())/3 + 'px' }, 400); 
    } 

    if (selfPosLeft < Math.floor(viewport.width())/3) { 
     itemList.animate({ left: Math.floor(viewport.width())/3 + 'px' }, 400); 
    } 
}); 

CSS：

#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; 
} 

Answer 1

すべてのアイテムについて必要なすべての情報を準備している間に、クリックしたアイテムに基づいて左の値を計算できます。

は、ここに私の変形例である：

と私は、この機能を備えたカルーセル項目のクリックアクションを結合させ、自己のキーワードを使用して、クリックされたアイテムを渡されました。

var itemClicked=function(item){ 
    var itemIndex=$(item).index(), 
     newLeft=(itemIndex*itemWidth*-1)+Math.floor(($(viewport).width()/itemWidth)/2)*itemWidth; 
    $(itemList).animate({left:newLeft+"px"},400); 
}; 

あなたはそれがこのURLに取り組んで確認することができます。私はそれが左0と中央要素の左側との間にパディングを計算しながら、これは視聴要素の数にもかかわらず動作する必要があることを前提としhttp://jsfiddle.net/rUZHg/3/

。

Answer 2

さてさて、それは醜いです、私はホそれはあなたにいくつかのアイデアを提供します。

私は中心にあるものを追跡するグローバルcurrentItemを作成しました。カルーセルが動くたびに、これが更新されます。

私が見つけた非常に有用な変数はselfPosLeftで、何がクリックされているか教えてくれました。私はそれを追加する必要があります90私は周りをクリックから得た複数だった。あなたのCSSにリンクされている必要があり、この番号を動的に見つける方法がわかりません。

それを試してみてください:) http://jsfiddle.net/sp9Jv/4/

まあ、私はあなたが3つの以上のアイテムを持っているときに、現在の項目とクリックされた1のselfPosLeft間の差を計算するためのコードを変更することができることを描いています、私はあなたにそれを残すでしょう:)このように、うまくいくようです。 http://jsfiddle.net/sp9Jv/5/