0

このjqueryカルーセルをさまざまな幅で機能させるようにしています。現在、繰り返される前に、最後にたくさんの空白があります。

最後にその空白をクリアするにはどうすればよいですか？

これが私のjsfiddleです。

http://jsfiddle.net/A4sZb/

4

1 に答える 1

1

何が間違っているのか

カルーセルは、アイコンの水平リストを表示することで機能します。アイコンを回転するとき、カルーセルはCSSを使用してリストを左右にシフトするだけです。すべてのリスト要素が左側にあるため、最後の空白が発生します。次に、もう一度[次へ]をクリックすると、すべての要素が右端に戻ります。

それを修正する方法

Dutchie432が言ったように、画面外のアイテムを再追加する必要があります。要素を最初から取得して最後に再び表示する機能は、CSSの変更だけで実行できる機能ではありません。実際にDOMを変更するには、JavaScript/jQueryコードを作成する必要があります。

サンプル実装

:firstjQueryを使用すると、または:lastセレクターを使用してリストの最初または最後の項目を選択できます。ユーザーが[次へ]をクリックしたら、最初のリスト要素を選択して削除し、カルーセルリストの最後に追加します。このようなリスト要素のループは、アニメーションシフトを実行した後に実行する必要があります。明らかに、移動する前に、最初/最後のアイテムが表示されなくなったかどうかを確認する方法が必要になります。また、最初のアイテムを削除して最後に配置したら、欠落している画像の幅を補うためにリスト要素をシフトすることを確認する必要があります。

于 2012-05-24T14:23:24.287 に答える