問題タブ [caroufredsel]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
1806 参照

jquery - CarouFredSel でページネーションをレスポンシブにする

既存のカルーセルをレスポンシブにすることを検討しています。ページネーションがあり、すべてのページが表示されますが、多くのページが含まれているため、小さな画面に合わせようとすると、数字が 2 行目に表示されます。次へと戻るボタンもあります。

私が望むのは、たとえば、1 から 5 までの数字と 3 つのドット (...) を表示し、5 ページで [次へ] をクリックすると、6 から 10 などを表示できるようにすることです。小さい画面で表示すると、各ページには 1 つの項目が含まれます。場合によっては 2 つの項目が上下に表示されます。

誰かが私にいくつかのサンプルコードを提供できるようなものを実装しましたか?

ありがとう

0 投票する
1 に答える
1330 参照

jquery - carouFredSel はローカルで動作しますが、MAMP やライブ サーバーでは動作しません

carouFredSel jQUERY プラグインに問題があります。すべてのスタイルをローカルで (MAMP を使用せずに) うまく動作させましたが、ファイルをライブ サーバーに移動し、すべてが適切な場所にあることを確認すると、壊れてしまいました。

同じファイルをローカルに保存でき、カルーセルが機能します。それは自分のコードやレイアウトに関係があるのではないかと考え始めています。私は Javascript にあまり精通していないので ( jQUERY を使用できます)、これは一種の学習プロセスです。どんな助けでも大歓迎です。

これが私のヘッダー コードです。HTML 5 ボイラープレートを使用しています。

編集:私の間違いです。エラー コンソールの内容を投稿するのを完全に忘れていました。次のように述べています。

エラー: TypeError: $("#carousel").carouFredSel は関数ではありません。

何か案は?どんな助けでも大歓迎です。ありがとうございました!

0 投票する
1 に答える
1004 参照

jquery - CarouFREDselフィルター/CSSの問題

レスポンシブ(html5ボイラープレート)レイアウトでcarouFREDseljQueryカルーセルプラグインを使用しています。したがって、表示されるアイテムのサイズは変わります。

私のHTMLは次のとおりです。

.portfolio-rightがその内容に縮小されるように、スタイル「clear:both」の最後のDIVを使用しています(カルーセルで表示されているアイテムを囲む境界線があります)。

CSS:

それ以外の場合は、コンテナをその内容に縮小する方法を見つける必要があります。または、carouFREDselの特定のアイテムのフィルタを機能させる必要があります(何らかの理由で機能しません)。

基本的に私の問題は、クラスまたは:visibleセレクターのいずれかでフィルターオプションが機能しないことです。したがって、スタイル「clear:both」の最後のDIVがページネーションに表示されます。

私は何かが足りないのですか、そしておそらく回避策はありますか?

0 投票する
1 に答える
4321 参照

jquery - CarouFredSel 画像リンク

設計中の Web サイトに CarouFredSel を使用していますが、問題が発生しました...画像を URL にリンクしようとするまで、すべてが期待どおりに機能します。

次のscriptようになります。

そして次のようにcode見えます:

どんな助けでも大歓迎です:)

ありがとう、
ジョシュ

0 投票する
1 に答える
766 参照

jquery - Safari で次へスクロールすると CarouFredSel が点滅する

CarouFredSel を使用して垂直スクローラー ( http://new.joshrodg.com/?page_id=206 )を表示する Web サイトに取り組んでいます。問題は、前のボタンをクリックすると、CarouFredSel が正常にスクロールすることです。 ..しかし、次のボタンをクリックしてスライドショーを進めようとすると、スクロールが台無しになります....奇妙なことに、WordPress MapPress プラグインを使用して Google マップを投稿した場合にのみ発生します。

MapPress プラグインが問題の原因であると確信していますが、いくつかのコードで修正できると思います (特に、これは Safari のみの問題であるように思われるため... Safari、Firefox、Chrome、およびIE8)

今、(ある程度)うまくいったことの1つはposition: relative、私の.sidebar-image acssスタイルに追加することでした。それに関する唯一の問題は、正しく進みますが、スクロール効果がないことです(目的を無効にします)

誰もこれを経験したことがありますか?

scriptのように見えます:

codeのように見えます:

そして私のようにCSS見える:

このコードはすべて、相対位置を持つ別の div にあります。問題を引き起こす可能性のある場所を読みましたが、css を削除した後でも、カルーセルは同じことを行います...

含まれcodeている div は次のようになります。

別のjQueryライブラリ(Googleから直接のものではなく、jQueryから直接のもの)を使用してみました。また、CarouFredSel パック バージョンを使用するのではなく、完全な CarouFredSel スクリプトを使用してみました。

何か案は?それは私を困惑させました:-(

ありがとう、
ジョシュ

0 投票する
1 に答える
706 参照

javascript - 連続スクロールが機能しないときのカルーセル トリガー

カルーセル (caroufredsel) スクロール (たとえば、これを確認してください) を連続して左にスクロールします。右の矢印にカーソルを合わせると、スクロールが停止し、方向が逆になります。カスタム イベントを使用してみましたが、機能していないようです。これがカルーセルのコードです。

カルーセルを反転させるカスタム イベントの方向は次のようになります。しかし、アイテム全体のスクロールが完了するまで機能しません。私が達成したいのは、ホバリング時に方向を瞬時に逆転させることです。

上記のコードは機能せず、スクロールの反転をシミュレートするさまざまなイベントを試しましたが、うまくいきませんでした。

これに対する回避策がない場合。簡単に作業を行う別のプラグインを変更したいと考えています。簡単にできることを知っている場合は、提案を残してください。どうもありがとうございました!

0 投票する
4 に答える
5522 参照

caroufredsel - carouFredSel-表示量を実際の画像量に設定します-それでもスクロールしますか?

私はこのスクローラーで作業しています

http://coolcarousels.frebsite.nl/c/2/

私はこの設定を以下に持っています。

私の問題は、それを設定していvisible: 4て、4つの画像があるので、スクロールしないことです。に設定するとvisible: 3、期待どおりに動作します。ただし、ブラウザを1920ピクセル幅の解像度で全幅開いたときに、4つの画像すべてを1つの画面に表示したいと思います。だから問題はそうです。私が持っている画像の量に見えるように設定すると、それは機能しなくなります。

4つの画像すべてを一度に画面に表示してから、それらをスクロールする方法はありますか?

0 投票する
1 に答える
441 参照

jquery - prettyphoto と chrome を使用した caroufredsel

私は画像に carouFredSel スライダーを使用しています。すべてが素晴らしいです。prettyPhoto を統合しました。これは Firefox で完全に動作しますが、Chrome / Safari ではメイン画像が読み込まれません。ここで prettyPhoto 画像を削除すると、Chrome でも正常に読み込まれます。問題を解決するために最善を尽くしましたが、解決策を見つけることができませんでした..



何が間違っている可能性がありますか?prettyPhoto または carouFredsel と何か関係があるのでしょうか?

よろしく

0 投票する
0 に答える
653 参照

javascript - Caroufredsel 無限線形イージングは​​、画面に収まる最後の画像の後にマージンを追加しています

私はhttp://chiaroscurodev.telegraphbranding.com/で CarouFredsel jQuery プラグインを使用しています。ご覧のとおり、ブラウザーの幅を考慮して、画面に収まる全体の画像の数を計算しています。次に、次の画像をスクロールする前に、最後の画像の後にマージンを追加します。

私のコード:

各画像の後にマージンを追加せずに、カルーセルがブラウザの 100% を無限にスクロールするようにしたいと思います。画像の絶え間ないストリームだけです。

また、画像をクリックするとカルーセルがスライドして画像がブラウザの中央に配置される機能を実装する方法を知っている人はいますか?

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

0 投票する
0 に答える
4825 参照

caroufredsel - carouFredSel: スクロール中のフェード効果: スクロールされた要素のみ

[0 1 2 3 4 5 6 7 8] の 9 つの要素が表示されます。

スクロールされた要素 (クリックで 1 つ、マウスホイールで 3 つ) には、白いラッパー div コンテナーでのスクロールアウトまたはスクロールイン中に「ハードエッジ」があります。

右クリック: <0 [1 2 3 4 5 6 7 8 9]

マウスホイールを押したとき: <0 1 2 [3 4 5 6 7 8 9 10 11]

そこで、スクロール オプション「カスタム エフェクトとイージング アニメーションを使用して 1 秒間スクロールする」をテストします。http://caroufredsel.dev7studios.com/code-examples/configuration.php

しかし

クロスフェード効果は、スクロール アウトおよびスクロール インする 2 つ (または 6 つ) の要素ではなく、9 つの要素すべてで機能します。

クリックで項目 0 をフェードアウトし、項目 10 をフェードインするか、マウスホイールで項目 0、1、2 をフェードアウトし、項目 9、10、11 をフェードインするソリューションはありますか?

ありがとう