オーバーフローの防止：画像を切り抜いて表示されない

Question

私は今カルーセルで、FacebookのF8写真カルーセルの下のtheir pageをモデルにして作業しています。

マイカルーセル構造は、基本的には同じである：私はコンテナ内

.container { 
    width: 100%; 
    position: relative; 
    height: 450px; 
    overflow: hidden; 
    div { 
    position: absolute; 
    top: 0; 
    width: 1400px; 
    display: inline-block; 
    background-position: center; 
    background-size: 1400px 450px; 
    background: url('...'); 
    height: 100%; 
    } 
    &:nth-child(2) { left: 1400px; } 
} 

ネストされた子divを持って

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 

SCSSのために、共に画面幅より大きいと私はスクロールしたいですそれらを水平にします。しかし、コンテナにオーバーフロー：非表示を設定してカルーセルをページの幅に制限するので、画面の最後までスクロールするとdivの残りの部分が切り取られます。

カルーセルを水平方向にスクロールするには、間隔を設定し、transform：translateX（）を使用して数ミリ秒ごとに2ピクセルずつ移動します。

イメージをトリミングしないようにするにはどうしたらいいですか？また、ユーザーが画面の大きさを横切って横にスクロールできないようにするにはどうすればよいですか？

Answer 1

jk間違い、私はコンテナ要素を翻訳していました。

コンテナ要素を2つの画像の幅全体に合わせ、overflow：hiddenとwidth：100％を持つ別のコンテナ要素に囲んで固定しました。