1

さて、左右をアニメーション化するカルーセルがあります。

たとえば、幅1000pxのビューポートdivと、合計で5000pxになる可能性のある一連のdivがあります。それらはすべて左に浮いているので、いつでも、ビューポートdivのアイテムのうち4つだけを見ています。それを無限にするための最良の方法は何でしょうか。ユーザーがカルーセルの最後のdivに到達したことをどのように検出できますか（左または右に移動）。すべての要素を削除して順序を逆にし、同じdivに追加しますか？または他の方法？私はjQueryを使用しています...

これは現時点では単なる概念（無限の部分）であるため、コードを投稿することは実際には不可能です。私は潜在的な解決策の直後です...

4

1 に答える 1

0

これは、「通常の」カルーセルを作成するために行ったことだと思います。HTML が次のようになっているとします。

<div class="viewport">
    <div class="container">
        <div class="group"> <!-- Without this div probably --!>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</div>

それを「カルーセル」にするには、ビューポートの幅を固定し、コンテナーを展開してすべての子アイテムを含めます ( を使用overflow: hidden)。右にスクロールすると左オフセットが減少し、左にスクロールすると左オフセットが増加します。左オフセット >= 0 の場合、最初の項目にいます。左オフセット <= -(コンテナーの幅) の場合、最後の項目にいます。

左右にスクロールするたびにこれらの条件を確認する必要があります。したがって、「グループ」の前後にコンテナのコピーを追加します。古いグループが表示されなくなったら、それを削除できます。これにより、スクロールがスムーズになり、位置が最後から最初にスナップしなくなります。ただし、アイテム数が多い場合、これは遅くなる可能性があります。したがって、最初は、アイテムをたとえば 5 つの多くの「グループ」に分割し、最後に到達したら、最初/最後のグループのコピーを追加し、最初/最後のグループを削除することができます。

別のオプションは、反対方向に高速でスクロールすることです。ユーザーに視覚的なフィードバックを与えない反対側の端にスナップする代わりに、スクロールを反対側の端まではるかに高速にアニメーション化できます。その場合、ユーザーが最後までスクロールすると、スクロールが停止し、もう一度スクロールすると最初に戻るので、ユーザーは何が起きているかに驚かされません。

それはちょうど私の 2 セントです。私はかつてカルーセルを行いましたが、この機能はありませんでした。私はそれを実装せずにそれを考えていました。

それが役に立てば幸い。

于 2012-06-27T19:23:30.633 に答える