問題タブ [caroufredsel]

stackoverflow に関するいくつかの投稿を読んだ後、div を並べて配置するためにいくつかのことを試みましたが、何も成功しませんでした。これまでCSSを重要な方法で使用したことがないため、苦労しています。

ページの右端からスライドインしたいスライドアウトがあります。スライダーの左端には、スライダーを閉じることができる div (以下のコードでは clickme と呼ばれます) が必要であり、スライダーの右側には、carouFredSel を含む div (以下のコードでは image_carousel と呼ばれます) が含まれます。 .

2 つの問題があります。

1. スライダーがスムーズに出ない。#slideout の遷移 CSS プロパティで見つけることができるすべてを試しましたが、スライダーは右からスライドするのではなく、表示されるだけです。

2. カルーセル (#image_carousel) を含む div が #clickme の右側に配置されていません。左 10% を #clickme で、右 90% を #image_carousel で #slideout したい。#clickme は左側の 10% を占めていますが、#image_carousel はクリックミーの上に配置されており、右側の 90% も占めていません。image_carousel に position = relative がある場合、見た目は少し良くなりますが、まだ正しくありません。

これがコードです。carouFredSel のものは、彼らの Web サイトの例からコピーしました。

ありがとう、

ポール

無料の JavaScript カルーセルを探していました。私は carouFREDsel に出会い、彼らのサイトの例からかなり良さそうに見えました。ただし、数日間それと戦ったので、うまく機能するとは確信していません（状況によっては）。無料の JavaScript カルーセルを使用して、良い経験をした人はいますか?

http://sorgalla.com/jcarousel/に出くわしまし たが、このページの日付は 2006 年 9 月だけなので、かなり古いものだと思います。

ありがとう、

ポール

OK、少し複雑な質問です。ページにカルーセルがあります (CarouFredSel プラグインを使用)。このカルーセルには 3 つの画像が含まれることもあれば、4 つ以上の画像が含まれることもあります。カルーセルは一度に 3 つの画像を表示するように設定されており、中央の画像が大きくなっています。

私の問題は、画像が 3 つしかない場合、カルーセルを左右にスライドして、隣接する画像を中央に表示する (したがって大きくする) ことができないことです。これを回避するために、ダミー画像を追加します (つまり<img src="" />、スライダーが 4 つの画像があると認識するように書き込みます。これにより、スライドできますが、4 番目の「ダミー」画像に到達する前にスライダーを停止できるようにしたいと考えています。

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

スライダープラグインのjQuery：

ここにJSFiddleがあるので、私が何を意味するかがわかります：http://jsfiddle.net/hvZzc/1/

一連の可変幅の画像があります。それらをカルーセルで回転させたいのですが、「carouFredSel」を選択しました。これは、私が見つけることができる最も構成可能なものと思われるためです。ブラウザで常に画像の1つを水平方向に中央に配置したい。したがって、従来のカルーセル画像はデフォルトで左揃えになりますが、ここでは、画像間に一貫した (10 ピクセル) のギャップを置いて、ビューの中央にある画像の周りに配置する必要があります。例を次に示します: http://coolcarousels.frebsite.nl/c/2/。これは固定幅の画像には最適ですが、私の画像は幅が可変です。この可変幅が問題です。

これを強調するために、簡単なモックアップを作成しました。コードは次のとおりです。

HTML:

CSS:

JS:

フィドル: http://jsfiddle.net/qqBus/

「.carousel-image」の幅を削除すると、画像が隙間なく隣り合って配置されるという望ましい効果があることがわかりますが、中央の画像が中央に配置されなくなります。

私が探している効果を達成する方法を誰かが見つけられるかどうか疑問に思いましたか? そのようなプラグインが存在する場合、私は代替プラグインを受け入れますが、長い間懸命に探してきましたが、可変幅の画像で動作するものを見つけることができません!

ありがとうございます。

CarouFredSel プラグインを Web サイトに追加し、次の例に従いました: http://coolcarousels.frebsite.nl/c/2/。スライダーは、ある画像を左に表示し、別の画像を右に表示して回転させることで、正常に機能しています。しかし今、テキストとおそらく画像を含む div を表示する必要があります。これはある種の記事のスクロールになり、スクロール機能が壊れます。

今はスクロールしません。それを修正する方法について何か考えはありますか？または、同じデザインでよりうまく機能する他のスライダーを知っていますか?

次のようにマウスホイールのサポートを設定しました。

問題は、マウスホイールによるスクロールを非離散にしたいということです。気圧 スクロール時の最小シフトは項目の高さです。ピクセル単位で連続的に移動したい。

Caroufredsel 仕様によると、caroufredsel はページの先頭に含める必要があります。問題は、プラットフォームのコンテンツ スロットにコードを統合する必要があるため、ページの先頭にアクセスできないことです。これを回避する方法はありますか?コンテンツ スロットに直接含めると、caroufredsel が読み込まれないため、スクリプトを動的に追加できます。

ありがとう！

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

カルーセルはクリック/スワイプ ドラッグ スライドショーで、caroufresel.js を使用します。このカルーセルには複数のインスタンスがありますが、カルーセルの 1 つをクリックしてドラッグすると、すべてのカルーセルが移動します。私はそれがJavaScriptにあると信じていますが、私はこれにかなり慣れていないので、これを理解することはできません.

だから私がやりたいのは、各カルーセルを分離して個別に移動することです。

これは基本的な構造であり、複数のカルーセルで複数回使用されます。それぞれが個別に区別されていますが、それぞれが個別に応答するためにカルーセルを実装するのに問題があります。

上部の最初のリンクは、元のマークアップと js を示しています。

応答に感謝します。

これがJavaScriptです：

carouFredSel の現在のスライドに「アクティブ」のクラスを追加しようとしていますが、機能しません。私がそれを機能させることができた最も近い方法は、を使用して最初のスライドに追加することでしたtrigger("currentVisible")が、更新されません。

ヘルプ！ありがとう ：）

Web サイトで Jquery carouFredSel を使用しているため、ページングを表示する必要があります

最初 前へ 2 3 次へ 最後へ

上で説明したように、これが可能かどうか教えてください。

ここでプラグインを見つけることができます

http://caroufredsel.dev7studios.com/

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