問題タブ [jquery-cycle2]

Cycle2 を使用して、水平方向にスクロールする jQuery 画像カルーセルを作成しています。画像はすべて均一な高さ (200px) ですが、幅が異なります。

これは、カルーセルを表示するために使用されるコードです。

...そして、これはブラウザの結果です:

カルーセルには実際には 4 つの個別の画像が表示されますが、それらの間にスペースはありません。

これは私が探している結果です:

Cycle2 カルーセルの画像に右マージンを追加したいのですが、imgまたはa要素を変更してマージンまたはパディングを含めると、カルーセルが左に正しく「ゼロ」になりません。

代わりに、最初の画像が部分的に隠れるように、カルーセルが左にずれているように見えます。次の図では、margin-right: 10px各a要素に追加しています。

メインのアートワークの周りに空白の領域を含む画像を生成する以外に、画像にマージンまたはパディングを追加する方法を誰か提案できますか?

ありがとう。

cycle2 プラグインで動作するように設定しましたが、右クリックして「新しいウィンドウで開く」しない限り、ページャー領域内のリンクが機能しません。提案？

フィドルを参照してください。ページャー領域のリンクをクリックしても何も起こらないことに注意してください。ただし、右クリックするとリンクが開きます。

ページャー付きの単純なcycle2スライドショーがあります。スライドショーは自動的に進行します (つまり、 setspeedと でtimeout)。私が達成したいのは、ユーザーがページャーのリンクをクリックすると、スライドショーが「手動」になり (自動トランジションが停止し)、その時点からページャーだけで制御できるようになることです。cycle2 API ドキュメントには、目的に役立つ「continueAuto」オプションがあると書かれています。そこで、次のcycle-pager-activatedようにイベントへのハンドラーを作成しました。

(ページャーのリンクをクリックすると) 期待どおりにイベントが呼び出されますが、呼び出しcycle({continueAuto: false})は何も行わず、スライドショーは無期限に続きます。私は何を間違っていますか？

looper.jsを使用して、div (例)内のさまざまな単語や画像をループしようとしています。

クロスフェード アニメーション オプション ( ) を使用する場合を除いて、すべて正常に動作しているようですclass="xfade"。 コンテンツはアニメーション中にのみ表示され、それ以外の場合は表示されません。

これは、でコメントアウトすることで修正さposition: relativeれ.looper .looper-innerます。

しかし、モバイルでのレスポンシブレイアウトが台無しになるため、これは受け入れられる解決策ではありません。

デフォルトの公式の例を使用しているので、それは私の側の間違いに違いないと思います...

デモ: jsfiddle

ご協力ありがとうございました。

私は、Cycle2 の前/次の機能を、BBC ニュースのフロント ページのトップ ニュース画像のスライドショーで使用されているものに似たものにすることに関心があります。

方法に関するヒント:

現時点では、画像がフェードイン/アウトするがナビゲーションがない、Cycle2 基本コンテナの作成に成功しています。これが私のテストサンプルです。

最近のプロジェクトで、Cycle2 スライドショーの画像がそのすぐ下の div に重なるという問題が発生しています。それは非常にランダムに発生します (このスライドショーを使用している 7 つのページがあり、ああ、8 回または 9 回ごとに発生します — パターンを見つけることができませんでした.

これが発生した場合、Web インスペクタを起動すると再描画が強制され、画像が所定の位置にポップされます。これは、Safari、Firefox、Chrome、および Mac と Windows の両方で見られます。

グリッチのスクリーン ショットは Droplr にあり、ライブ バージョンはこちら にあります。これは 7 つのページすべて (Seraform および以前の作業メニューの下にあります) で発生し、問題を確認するにはすべてのページを数回クリックする必要がある場合があります。

http://d.pr/i/wnwk

そして、これはページがどのように見えるべきかです:

http://d.pr/i/esRS

私は考えられるすべてのデバッグトリックを試しましたが、完全に途方に暮れています。

私はcycle2を使用しており、プログラムで別のscripts.jsファイルに設定しています。プログレッシブローディングを追加する前までは、スライダーはすべてうまく機能しています。ページに複数のスライダーがあるため、次のように設定しました。

そして、例として、各スライダーの HTML マークアップは次のとおりです。

ただし、ページをロードすると、コンソールに次のように表示されます: init が script.js にあり、このマークアップが別のページにあるため、これはReferenceError: slides is not defined理にかなっていますが、どうすればこれを機能させることができますか、またはより良い方法がありますか? cycleページには複数のスライダーがあることに注意してください。

ありがとう、R

このデモと同じ方法で、カルーセル ページャーで Cycle2 を使用しています: http://jquery.malsup.com/cycle2/demo/caro-pager.php

現在、デモのアクティブなスライドは、最後の数枚のスライドを使用していない限り、左側にあります。私が欲しいのは：

1. アクティブなスライドが左側のスライド 1 から始まるように
2. 次に、スライド 2 をクリックすると、サムネイルは移動しませんが、2 番目のサムネイルがアクティブとして表示されます。
3. スライド 3 をクリックすると、サムネイルは移動せず、3 番目のサムネイル (中央) がアクティブになります)。
4. スライド 4 をクリックすると、すべてのサムネイルが 1 つ左に移動し、4 番目のサムネイル (現在は中央) がアクティブになります。
5. スライド 5、6、7 については上記と同じです。
6. スライド 8 をクリックすると、サムネイルは移動しませんが、8 番目のサムネイルがアクティブになります (現在は右から 2 番目)。
7. スライド 9 をクリックすると、サムネイルは移動しませんが、9 番目のサムネイル (右側の最後のサムネイル) がアクティブになります。

図を参照してください:

ここでデモをjsfiddleにコピーしました：http://jsfiddle.net/Qhp2g/1/しかし、どこから始めればよいかわからないので、本当に助けていただければ幸いです(!)このユーザーが試したように、 data-cycle-carousel-offset="40%"onを使用してみました#cycle-2同様の問題Cycle2：メインスライドショーの下の中央カルーセルアクティブスライドで、最後のスライドにアクセスできず、最初の左側にスペースがあるため、これは機能しません。

必要に応じてプラグイン カルーセル スクリプト ( http://malsup.github.io/jquery.cycle2.carousel.js ) を変更する必要があると思いますが、どこから始めればよいかわかりません。助けてくれてありがとう。

スライドが終了し、スライダーが機能し始める前に機能を実行したい。私のコードは次のとおりです。

cycle-initialized起動しないことを除いて、すべてがうまく機能します。私に何ができる？