jQueryを使用した水平メニューの基本カルーセル

Question

水平メニューには、同じスペースに表示する要素が多すぎます。私は、ユーザが方向矢印をクリックしたときにコンテナが水平に一方の側に翻訳されるように、カルーセル効果を作成したいと思います。次の要素が表示されるようにright現在の要素をクリックすると、左側に変換なるように私はjQueryの/ CSSでこれをアニメーション化するにはどうすればよい

.container { 
 
\t display: flex; 
 
\t align-items: center; 
 
\t height: 70px; 
 
\t width: 420px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
} 
 

 
a { 
 
\t display: flex; 
 
\t align-items: center; 
 
\t justify-content: center; 
 
\t margin: 0 10px; 
 
\t min-width: 50px; 
 
\t min-height: 50px; 
 
\t border: 0.1px solid tomato; 
 
} 
 

 
#left, #right { 
 
\t border: 1px solid orange; 
 
    padding: 5px; 
 
    margin: 10px 60px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
* { 
 
\t -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
 
\t position: relative; 
 
}

<div class="container"> 
 
\t <a>1</a> 
 
\t <a>2</a> 
 
\t <a>3</a> 
 
\t <a>4</a> 
 
\t <a>5</a> 
 
\t <a>6</a> 
 
\t <a>7</a> 
 
\t <a>8</a> 
 
\t <a>9</a> 
 
\t <a>10</a> 
 
\t <a>11</a> 
 
\t <a>12</a> 
 
\t <a>13</a> 
 
\t <a>14</a> 
 
</div> 
 

 
<div id="left">left arrow</div> 
 
<div id="right">right arrow</div>

？
私はtranslate（％）を使用することを考えていましたが、divの幅はコンテナ内の要素の数に依存しています。 また、表示する要素が2つしかない場合、アニメーションを調整する必要があります。

私は少し失われているので、どんな助けも歓迎です！

Answer 1

このようなものを使用できます。私は、メインコンテナの内部を移動できる内部コンテナを追加しました。

開始の終了に達していないかどうかはまだ確認していません。最初または最後の子要素が表示されているかどうかを確認する方法があります。

$(document).ready(function() { 
 

 
    $("#right").on("click", function() { 
 
    var l = $(".inner").css("left"); 
 
    l = Number(l.substring(0, l.length - 2)) - 420; 
 
    $(".inner").css("left", l + "px"); 
 
    }); 
 
    
 
    $("#left").on("click", function() { 
 
    var l = $(".inner").css("left"); 
 
    l = Number(l.substring(0, l.length - 2)) + 420; 
 
    $(".inner").css("left", l + "px"); 
 
    }); 
 
});

.container { 
 
    height: auto; 
 
    width: 420px; 
 
    overflow: hidden; 
 
    padding: 1em 0; 
 
    border: 1px solid black; 
 
} 
 

 
.inner { 
 
    display: flex; 
 
    align-items: center; 
 
    position: relative; 
 
    left: 0; 
 
} 
 

 
a { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin: 0 10px; 
 
    min-width: 50px; 
 
    min-height: 50px; 
 
    border: 0.1px solid tomato; 
 
} 
 

 
#left, 
 
#right { 
 
    border: 1px solid orange; 
 
    padding: 5px; 
 
    margin: 10px 60px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="inner"> 
 
    <a>1</a> 
 
    <a>2</a> 
 
    <a>3</a> 
 
    <a>4</a> 
 
    <a>5</a> 
 
    <a>6</a> 
 
    <a>7</a> 
 
    <a>8</a> 
 
    <a>9</a> 
 
    <a>10</a> 
 
    <a>11</a> 
 
    <a>12</a> 
 
    <a>13</a> 
 
    <a>14</a> 
 
    </div> 
 
</div> 
 

 
<div id="left">left arrow</div> 
 
<div id="right">right arrow</div>