問題タブ [carousel]

次の機能を持つ Blackberry コンポーネントを作成したいと思います。

• カルーセル/スプリングボード インターフェイスによく似た、さまざまな画像フィールドの水平スクロール。
• 下部にある、フォーカスされている画像のインジケーターとしての円形のドット。
• ユーザーが画像を左右にスワイプまたはスライドすると、中央にある次の画像がフォーカスされ、スライド アニメーションが画像を所定の位置にロックする必要があります。

画面全体に水平方向に 3 つの画像プレースホルダーがある、これの単純化されたバージョンを実行できます。ユーザーがスワイプすると、画像が変化します (つまり、フォーカスされた画像が中央にある状態で左または右に移動します)。

ただし、ユーザーが左または右にスクロール/スワイプすると、画像が中央にロックされるように、勢いのあるスムーズなスクロールを実装する方法を知りたいです。

サイトで 4 つの画像を循環する必要があります。サイトに別のプラグインを追加したくなかったので、独自の単純なカルーセル (以下の html、css、および js) を作成しました。

私の質問は、このコードを見るだけで、それを行うための明らかに簡単な/より良い方法はありますか?

html:

CSS:

js:

次の仕様を満たすネイティブ JavaScript または jQuery プラグインを探しています。

• 一連の画像を順次移動 ( ul/ li)
• ページングではなく、継続的な動き
• 無限に表示され、最初からシームレスに再起動します
• ホバーで一時停止する機能
• 追加のプラグインが不要または最小限

これは簡単に聞こえると思います。しかし、私は Web を調べて、Cycle と jCarousel/Lite を試してみましたが、うまくいきませんでした。存在するべきだと感じており、自分で書く前に質問をしたかったのです。

どんな方向でも大歓迎です。ありがとう。

jQuery を使用して非常に基本的なスライダーを作成しました。.theleft と .theright と呼ばれる 2 つの矢印があり、クリックすると一部の div コンテンツが移動するため、画像でいっぱいの水平ギャラリーが 950 ピクセルの範囲で左右に移動します。これはコードです：

HTML は非常に単純です。

私の質問は、ページが読み込まれたときに最初に左矢印をクリックすると、ギャラリーがビューポートから外れて右側で失われる、つまり、スライダーを「制限」する方法が見つからないということですアクション...

それを改善する方法を知っていますか？

どうもありがとう。

（ページングを有効にして）継続的にスクロールできるスクロールビュー（たとえば、10個のアイテム）を作成する必要があります。つまり、右にスクロールし続けると、最初に開始したアイテムが最後まで表示され、ループし続けます。

これにアプローチする方法についての推奨事項を探しています。一連の画像を受け取ります。並べても問題ありません。私の主な関心事は、スクロールするときに画像がループで表示され続けるように、画像を移動する方法とタイミングです。ありがとう！

私は最近、Web デザイナー マガジンでトップ 10 の jquery テクニックを読み、http: //www.struttcouture.com のカルーセル効果が好きです。でも、もう少しカスタムしたい。たとえば、画像をスライスして、各画像のさまざまなセクションを、順序付けられていないリスト項目ではなく div 内のリンクにする方法はありますか?

あなたの考えを知りたいです。

ありがとうジュディス

http://wms-clients.com/wms2.0/2010/にテスト Web サイトがあります。テーマに組み込まれている jquery カルーセルを使用しています。私の唯一の問題は、スライドショーを進めると、一度に 1 枚のスライドではなく 2 枚ずつ進んでいるかのように、いくつかのスライドをスキップしてしまうことです。この問題が他の Web サイト フォーラムに投稿されているのを見たことがありますが、決定的な回答を得たことはありません。誰か見て、感想を聞かせてくれませんか？

ありがとう。

カルーセルの表示画像番号5を3から増やすのを手伝ってくれる人はいますか。

私は次のファイルを使用しています

jquery.jcarousel jquery.jcarousel.min

このjQuery Carouselを wordpress テーマ内で使用して、いくつかのバナー画像を表示しています。私がこのスクリプトを選んだのは、私が堅実な js コーダーではなく、自動的にインスタンス化されるページネーションが必要だったからです。この問題の例はhttp://bfc.ravennainteractive.comで見ることができます。最初の画像を示します。3 つの利用可能な画像があり、3 つのページネーション項目がリストされていますが、画像 2 と 3 は黒い背景を示しています。

ソースを表示して画像をクリックすると、画像が表示されます。URL は良好です。これは何か愚かなことですか？

ここからダウンロードしたjQueryカルーセルを使用しています：http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm

ページネーションを使用し、ページ番号がクリックされると、現在のページ番号に「アクティブ」と呼ばれるクラスを適用します。このクラスが適用されたときに発生するイベントをトリガーしたいのは、左矢印と右矢印を使用してクラスを現在のページ番号に適用するためです。

クラスが適用されたときにトリガーしたいイベントは次のとおりです。

私はそれを機能させましたが、ページがロードされたときのみ:

最初のページ番号にはデフォルトでクラスが適用されているため、ページの読み込み時にこれが機能します。クラスが他のページ番号に適用されるため、これを行う必要があります。