5

一度に 3 つのアイテムを表示するカルーセルにスクロール可能な jQuery Tools を使用し、自動スクロールと循環方式で 1 ​​つのアイテムをスクロールしています。

CSS を使用して 3 つの項目を表示しました。これは、カルーセルが最後のアイテムに到達するまで正常に機能します。次のアイテムをロードするために、カルーセルが通過するまで待機しているようです。

また、最後のアイテムを表示する前に、中央のアイテムが完全に表示されるまで待機しているようです。

デモはこちら: http://jsfiddle.net/pgxSm/6/

これについて私にできることはありますか？

4

3 に答える 3

9

はい、できます。私はまったく同じ問題を抱えていました。

  1. アイテムを含む要素の幅は非常に広くする必要があります。次のように CSS を追加してみてください。

    .items {
    width: 20000em;
}

    実際、開発者のデモ ページに記載されているように、これは jQuery Tools Scrollable を適切に動作させるための要件の 1 つです。このようにして、スクロール中に最後の項目の後にスペースが表示されないように、すべての項目を 1 行に表示できます。小さすぎない限り、必要以上に大きくてもかまいません。

  2. jQuery Tools Scrollable は、実際には一度に 1 つの項目のみを表示するように構築されています。これは、スクリプトのコードを変更する必要があることを意味します。

    縮小されていないスクリプトはこちらにあります。Scrollable スクリプトで次の行を検索します。

    cloned2 = self.getItems().eq(1).clone().appendTo(itemWrap);

    次の行に置き換えます。

    cloned2 = self.getItems().slice(1,4).clone().appendTo(itemWrap);

    このようにして、(最初のアイテムだけではなく) 最初の 3 つのアイテムを複製し、それをアイテムの最後に追加します。これにより、一度に複数のアイテムが表示されていても、循環スクロールが可能になります。一度に表示できる項目を増やしたい場合は、 に置き換え4て[number of visible items] + 1ください。確かに、一度に複数の項目を表示して jQuery ツールを動作させる方法は他にありません。私は職場でもこのソリューションを使用しています。

    スクリプトの縮小版を再度取得したい場合は、変更後に、このminifierを使用してください。それは魅力のように機能します。:)

これがあなたが探していたものである場合は、正解としてマークすることを検討してください。ありがとうございました！

于 2012-05-02T19:04:22.693 に答える
2

上記の回答は技術的には正しいですが、jQuerytools サイトからバンドルでダウンロードする場合は、言葉遣いが少し異なります。

代わりに探している行は次のとおりです。

l = f.getItems().eq(1).clone().appendTo(h);

上記の回答と同様に、これを次のように変更する必要があります。

l = f.getItems().slice(1,4).clone().appendTo(h);

完全にテストされていないため、自己責任で使用してください。

于 2012-12-07T14:24:54.510 に答える