問題タブ [flexslider]

モーダル ウィンドウで Flexslider を使用しています。モーダル ウィンドウを開くと、Flexslider と次/前のナビゲーションが表示されますが、ブラウザー ウィンドウのサイズを変更するまで最初のスライドは読み込まれず、本来の状態で表示されます。

この問題は、Firefox 11.0、Chrome 19.0.1084.56、および Opera 12.02 で一貫しているようです。

問題を説明するには、ここで最初の画像をクリックしてください

jQuery は非表示の要素を処理できないと読みましたが、これが問題なのですか? 回避策はありますか?

レスポンシブサイトにflexsliderを設定しています。私が作成しているスライダーは、横向きと縦向きの両方の画像を撮影します。smoothHeight: true画像に合わせて高さが調整されるように設定しました。

最大のメディアクエリでは、flexsliderコンテナの幅は750pxです。これは横向きの画像には問題ありませんが、縦向きの画像は大きくなりすぎます。ポートレート画像の幅はコンテナと同じサイズ（幅750px）に設定されているため、高さは少なくともその2倍になり、スクロールせずに画像全体を表示することはできません。

cssでmax-height: 750px、高さの問題を解決する設定を試しましたが、flexsliderは、幅750ピクセル、高さ750ピクセルに合うように画像を拡大します。

アスペクト比を維持し、それに基づいて画像の幅を調整するためにフレックススライダーを取得する方法を知っている人はいmax-heightますか？ポートレート画像の高さは750ピクセルになりますが、アスペクト比は維持されます。

ここで LJ902 によって提供されるように、フレックス スライダーの外側のリンク/ボタンが rel タグを使用して特定のスライドをターゲットにできるようにするフレックス スライダーのコードを実装しています: jQuery FlexSlider hide Slider but keep visibility of Manual Controls

フレックススライダーがスライドのセクション内に配置されているときに、ターゲットリンク/ボタンのcss状態を変更する方法に興味があります(アクティブな状態であることを示すために別の色の背景を与えます)。

たとえば、下の例では、画像 images/section2-Image01.jpg から images/section2-Image03 の間の状態でスライダーを操作すると、セクション 2 のスライド サム リンクの css 状態が変更され、セクション内のスライドが変更されます。 3 セクション 3 のスライドサム リンクの css 状態が変更され、セクション 2 のスタイリングが以前の状態に戻ります。本質的には、ユーザーが次のセクションにスライド/クリックしたときに流れるタブのような機能を作成します

誰でもこれで私を助けてくれますか? 私の平凡な開発スキルは、この 1 日かそこらでこれに悩まされています。ありがとう!

これがなぜなのか誰か教えてもらえますか？私は初心者ですが、flexslider.css には、このスペースを追加できるものは何もありません。ありがとう！

適切なリンクがクリックされたときに div を表示/非表示にする jquery コンテンツ スイッチャーがあります。これらの各 Div の内部には FlexSlider があります。最初のフレックス スライダーは正常に動作しますが、リンクをクリックして別の Div を表示すると、フレックス スライダーがめちゃくちゃになり、一度に 3 つのスライドがすべて表示されます。ブラウザ ウィンドウの焦点を外して再度焦点を合わせると (デスクトップをクリックしてウィンドウの焦点を外し、ウィンドウ内をクリックして再度焦点を合わせる)、フレックス スライダは正常に機能します。説明するのは難しい問題ですが、実際に見てみるのが一番です。サイトはhttp://www.benhenschel.comです。

「Web」は正常に動作する最初のスライダーですが、「モバイル」をクリックすると、2 番目の Flex スライダーが表示され、3 つのスライドすべてが一度に表示されることがわかります。ブラウザー ウィンドウのフォーカスを外して再度フォーカスすると、フレックス スライダーが正しく表示されます。

コンテンツ スイッチャーと Flex Slider のコードは次のとおりです。

ここにHTMLがあります

jQueryについてはよくわからないので、お役に立てれば幸いです。

他の誰かがこの種の問題を抱えていましたか？ページの上部にドロップダウンメニューがあり、次にflexslider、次にいくつかの一般的なテキストと画像があります...2つのフォントがあります。1つはGooglefonts APIから呼び出され、もう1つはfontFaceを使用します（これが関連する場合に備えて） ！）..

MacのChromeで表示すると、非常に奇妙な動作が発生します。スライドが移動するたびに、ページ上のすべてのテキストが非常に「薄く」なり、一部の（すべてではない）ナビゲーションリンクがピクセル単位で上下に「ジャンプ」します。私はこのようなものを見たことがなく、それは奇妙な対立だとしか思えませんか？私は、MacのFF、Opera、Safari、Chrome、WindowsのIE9、Chrome、WindowsのFFなど、見つけることができるすべてのものでテストしました。Chromeの両方のバージョンは見栄えがよくありませんが、Macのバージョンははるかに悪いです。

残念ながら、プロジェクトが100％完了するまで、プロジェクトをWebにリストしたくないので、フィドルを作成するには多すぎると思います。しかし、実際のflexslider Webページを調べたところ、同じ種類の障害が見つかりました。サムネイルを見ると、私が何を意味しているのかがわかります（もちろんChromeを使用している場合）。-http ://flexslider.woothemes.com/thumbnail-controlnav.html

私が取り組んできたコードを保持したいので、誰かが修正を知っていますか？

flexsliderとjqueryUIに大きな問題があります。

http://jsfiddle.net/YsvS3/

jquery UIのインクルードを削除すると、すべてが正常に機能します。

誰かが私を助けることができますか？

次のようにスライダーを含めます。

http://ashwin931996.webege.com/

Flexsliderは初期化されていません。理由は何ですか？

cssとjsは正しくリンクされています。

Fancybox のスクリプト、css、jquery をプラグインすると問題が発生し、flexslider スクリプトが機能しません。次のエラーが表示されます。

fancybox スクリプトを削除すると、flexslider が機能します。両方を使用することは可能ですか？

Flexslider を使用して、さまざまなサイズの製品画像を A​​PI から取得しています。私はそれらを Flexslider の に放り込ん<ul>でいますが、これらのさまざまな画像サイズはうまく再生されません。画像の高さが異なる場合、Flexslider は適切にアニメーション化されますが、レイアウトに収まるように Flexslider の高さと幅を固定したいと考えています。全体を固定サイズに入れてみました<div>が、Flexslider はそれを完全に無視し、残りのレイアウトにオーバーフローします。Flexslider のサイズが変更されないように画像のサイズを変更する方法はありますか?