問題タブ [caroufredsel]

注: 私は現在 CarouFredSel を使用していますが、特定のプラグインを好むわけではありません..私はタスクの目標を達成することにのみ関心があります..提案がある場合は、コメントしてください! :D ありがとう

これが私がやろうとしていることです:

動的に作成された HTML コンテンツを含むボックスがあり、次のことを行う必要があります。

1)ボックスに 4 つ以上のアイテムがロードされている場合にのみ、コンテンツの垂直 (上向き) カルーセル/ティッカー効果を提供します。

2) 4 つ以上のアイテムがある場合は、カルーセル/ティッカーを開始し、マウスオーバーで一時停止し、マウスアウトで再開し、カルーセル内のアイテムごとに方向 (上/下) を変更したり、前後に移動したりできるナビゲーションを提供します。

3)各ボックスの下部に div があります。ボックスに 4 つ以上のアイテムがある場合は、各アイテムを実行し、その中の画像のソース (img.bimage) を取得して、ボックスの下部にあるその div 内にサムのページネーションを作成する必要があります。これにより、ユーザーはつまみをクリックしてリストをスクロールできるようになります。

これまでの作業例を次に示します: http://jsfiddle.net/revive/jZMhE/

(note, the pagination callback is commented out of the JS, but that is what the pagination should look like)

CarouFredSelまたは別のプラグインまたは関数を使用してこれらのことを達成する方法についての提案があれば教えてください。

ご協力いただきありがとうございます！！

CarouFredSel を使用して無制限の質問を続けます。

カルーセルを制御する一連のサムネイルがあります。これは、セットアップ方法で私が持っていた以前の質問へのリンクです。

caroufredsel 画像サムネイルのワードプレスでのページネーション

そして、親指がクリックされたときに一時停止する方法に関する別の質問

クリック時にカルーセルを一時停止

私の解決策は、遅延を追加することでした。

別のサムネイルをクリックするまで、すべてうまくいきます。何も起こりません。それは私が思う一時停止/遅延と関係があります。タイムアウト機能を削除したかのように、クリックされるサムネイルごとにフェードしますが、サムネイルをクリックするたびにスライドショーが一時停止することはなくなりました。

要約すると、これはサムネイルを初めてクリックしたときに正常に機能し、その後サムネイルをクリックしても何も起こりません。スライドショーを再び開始できないようです。

いくつかの条件ステートメントを考えましたが、考えられるそれぞれのステートメントは、後続のクリックからではなく、各インスタンスに適用されます。このようなもの：

しかし悲しいことに、それは常に最初の条件にヒットし、他の条件に到達しないため、一時停止しません。おそらく論理的な問題だと思いますが、カルーセルを再び開始するために追加する必要があるトリガーにすぎないのかもしれません。わからない。

私はWordpressのテーマでCaroufredselと協力しています。ここでは、すべてのアイテムが投稿にリンクしています（そして、このカルーセルは常にこの投稿の上にあります。

現在、私のカルーセルはランダムな順序で開始されていますが、クラス「ativo」を持つ現在のアイテムを最初に開始するにはどうすればよいですか？

これが私のjsです：

これがphpです：

私は素晴らしいCarouFredSel JQuery カルーセル プラグインを使用しています。これには、ハンドヘルド デバイス用 のJQuery TouchSwipeライブラリを統合するための機能も含まれています。

カルーセル要素は div であり、div 内には<ahref>タグでラップされた画像とテキストがあります。

すべてが正常に機能しますが、カルーセル要素 (この場合は div) にリンクが含まれていると、さまざまなモバイル デバイスでスワイプ効果が機能しないことに気付きました。

画像/テキストの周りのリンクを削除すると、スワイプ モーションは正常に機能します。まるでpreventDefault()逆に働いているかのようです。画像の周りのリンクを削除し、テキストをリンクとして残すと、スワイプはテキストではなく画像に対して機能します。

アイテムをリンクとして簡単にクリックできますが、リンクの場合はスワイプできません。

特に CarouFredsel でこの問題を経験した人はいますか?

どうもありがとう、SO。

jQuery CarouFredSel プラグインで構築されたカルーセルがあります。それは正常に動作します。サイトの指示に従って、スワイプ機能を追加しました。jquery touchswipe プラグインを使用しています。

問題は、カルーセル内のアイテムに次のようなハイパーリンク (A タグ) がある場合です。

たまたま画像間にスペースを確保しない限り、これはスワイプしません。その後、動作します。

奇妙なことに、私は Zurb Foundation Orbit スライダーも使用しており、スライダー内の画像にリンクが含まれていても、そこでのスワイプ イベントは正常に機能します。

何か案は？私の初期化コード:

編集/更新: カーソルが画像上にないときにスワイプすることを示すには、次のスクリーンショットを参照してください。

これはフィドルとして機能しますが、実際の Web ページでは機能しません。 http://jsfiddle.net/smlombardi/JqRhb/

carouFredSel を、特定のスライドに移動するためのコントロールを備えた無限の円形スライダーとして使用すると、少し問題が発生します。ここに私の実装コードがあります:

問題は、各要素のインデックスが一定でないことです。スライダーが動くたびに変化します。そのため、どちらにスライドするかを判断するのに苦労しています。スライダーの各liにクラスがあり、リンクの「rel」属性を使用して、対応するクラスをhoverIntentイベントに渡しています。デバッグ中に同じ名前をロールオーバーすると、インデックスが 6 になることがあります。その後、スライドしてスライドし、もう一度ロールオーバーすると 10 になります。パターンがわかりません。そもそも何かがおかしい。

間違ったことをしただけかもしれませんが、目標は、ページの中央に「強調表示された」アイテムを含むスライダーを配置することです。その後、名前の上に数秒間カーソルを合わせると、スライダーがその特定の写真に移動します。

お時間を割いていただきありがとうございます。

Isotope を Caroufredsel と一緒に使用しようとしていますが、うまくいきません。

私は使用しています：

HTML+WP:

実際、Isotope と Caroufredsel は同じ ID を使用しています。これが主な競合です。

これが私が CarouFredsel と Isotope を呼ぶ方法です....

ありがとう

carouFredSel jQuery プラグインで作成されたカルーセル内にある画像の遅延読み込みを実装しようとしています。

何かアドバイスはありますか、それともすでに似たようなことを達成していますか? デフォルトではできないようです。

CarouFredSelを使用して、divにさまざまな画像を表示しようとしています。この画像は、最初は非表示にして、後でボタンをクリックしたときに表示する必要があります。しかし、期待どおりに機能していませんが、最初にdivを表示に設定すると、このdivを問題なく非表示にして表示できます。だから私は誰かがCarouFredSeldivを隠して表示する問題を解決するのを手伝ってくれるかどうか探しています。

CSS：

CarouFredSelを表示するhtmlは次のようになります。

jqueryの呼び出しは次のとおりです。

divの表示と非表示を教えてください。

このカルーセルは、次のような wordpress プラグインとして用意されています (ブラウザ ウィンドウの全幅):

ブラウザー ウィンドウのサイズを変更すると、メディア クエリがトリガーされるまで画像のサイズは同じです。

次に、サイズ変更が必要な div のサイズを変更すると、画像は正しく縮小されますが、これが発生します 。画像は「中心からずれています」。カルーセルの作成で発生する一部のプロセスは (当然のことながら) トリガーされません。私が今これを解決した方法は次のとおりです:(javascriptがDRYではないことはわかっています。これは単なる例です)

カルーセルのonCreateイベントでは、サイズ変更イベントをバインドしてwindow、ブラウザー ウィンドウが指定された制限を超えたときにカルーセルを再作成しました。これは機能しますが、問題はないと思いますが...

これは適切な方法ではなく、悪いことのように思えます。これを適切に行うにはどうすればよいでしょうか?