クリックでコンテンツを左右に移動

Question

クリックイベントで左右にコンテンツを移動しようとしていますが、左または右の余白で停止する必要があります。 list-itemが動的に生成されます。ここで私がこれまで試みたコードはありますが、価値はありません。私のコードでは、コンテナを左右に動かしています。しかし、私はlist-itemを左右に移動する必要があります。

どうすればいいですか？このような

function moveList(px) { 
 
    $('.list').animate({ 
 
    'marginLeft': px 
 
    }); 
 
}

.list { 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
    height: 85px; 
 
    padding: 10px 0; 
 
    margin: 25px 0; 
 
    position: relative; 
 
} 
 
.list-item { 
 
    display: inline-block; 
 
    min-width: 20%; 
 
    max-width: 150px; 
 
    padding: 10px 0; 
 
    border-radius: 3px; 
 
    background: #eee; 
 
    border: 1px solid #ddd; 
 
    margin: 0 5px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
} 
 
#right-arrow { 
 
    width: 40px; 
 
    height: 40px; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 35px; 
 
    z-index: 999; 
 
    border-radius: 50%; 
 
    background: url(img/right-arrow.png) no-repeat #000; 
 
} 
 
#left-arrow { 
 
    width: 40px; 
 
    height: 40px; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 35px; 
 
    z-index: 999; 
 
    border-radius: 50%; 
 
    background: url(img/left-arrow.png) no-repeat #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="right-arrow" onclick="moveList('-=50px')"></div> 
 
<div id="left-arrow" onclick="moveList('+=50px')"></div> 
 

 
<div class="list"> 
 
    <div class="list-item">1</div> 
 
    <div class="list-item">2</div> 
 
    <div class="list-item">3</div> 
 
    <div class="list-item">4</div> 
 
    <div class="list-item">5</div> 
 
    <div class="list-item">6</div> 
 
    <div class="list-item">7</div> 
 
    <div class="list-item">8</div> 
 
    <div class="list-item">9</div> 
 
    <div class="list-item">10</div> 
 
</div>

Answer 1

てみスクリプト：次に

position: absolute; 
top: 0; 
left:0; 

：

function moveList(px) { 
    $(".list-item:first-child").animate({ 
    'marginLeft': px 
    }); 
} 

Answer 2

あなたと.list-itemsをラップ要素を作成する場合、それはあなたのために容易になりますマージンを変更する代わりに、 leftの値を変更する必要があります。

ウェブにセマンティックコンテンツを使用する場合は、divだけでなく、別のHTML構造を使用することをお勧めします。例：

<nav> <!-- As this is containing page navigation elements--> 
    <ol> <!-- As this is an ordered list of elements--> 
     <li> <!-- Each list element--> 
      First element 
     </li> 
     <li> 
      Second element 
     </li> 
    </ol> 
</nav> 

Answer 3

単純に翻訳してください。

これを定義します（clickerはクリックイベントのセレクタです）。

var xValue = -5; 
$("#clicker").on('click', function(e) { 
    e.preventDefault(); 
    $(".list-item").css("transform","translateX("+xValue+")"); 
    xValue -= 5; 
}); 

翻訳はあなたのマークアップを混乱させず、作業中のオブジェクトのみを（この場合は）左に移動します。 xValueを保存すると、繰り返しはclickerをクリックして左に移動できます。