問題タブ [flickity]

その中にあるimgの向きに基づいてコンテナのサイズを変更する必要があります。縦長の画像には width:50% コンテナーを、横長の画像には width:100% コンテナーを使用します。

私が思いついたJQueryは機能しません。見た目の内容に関係なく、2 つのクラスのうちの 1 つを追加するだけです。

Javascript:

ラフ HTML:

CSS:

問題を説明するために Fiddle を作成しました: JSFiddle

誰かが私の間違いを見つけて助けてくれることを願っています。このコードでは、flickityスライダーを使用しています。

次の angularjs ディレクティブがあり、ng-click を使用して、property-slider.html 内で showMap() を実行できるようにしたいと考えています。私は何が欠けていますか？

すべての画像を表示するためにスクロールする必要がないように、画像が含まれる要素に収まるFlickityスライドショーを作成しています。現時点では、画像が利用可能な幅を埋めるようにしていますが、垂直方向にスクロールします。

私がやろうとしていることの例をjsFiddleで作成しました。私もLazySizesプラグインを使用し、 Picturefillsrcsetとsizes一緒に使用していますが、問題は Flickity がインライン スタイルを介して要素に高さを追加することにあるように思われるため、これらのいずれにも関連しているとは思いません。スケーリングされた高さではなく、画像の自然な高さ。flickity-viewport

HTML

SCSS

残りの CSS はflickity.cssから取得します。

JS

Flickityのドキュメントでは、CSS で 100% の高さを設定できるようにする必要があるようですが、CSS に高さを追加するか を使用するsetGallerySize: falseと、ギャラリーに高さがありません。

Flickityの画像スライダーにマウス ホイールによる水平スクロールを追加しようとしています。ブラウザー コンソールには、次のエラーが表示され ます

。「undefined のプロパティ 'x' を設定できませ


ん」

JavaScript:

PS: コードはこの JQuery プラグインの上で動作します。

画像カルースの水平スクロールを設定するためにさまざまなアプローチを試し、最終的にこれにたどり着きましたが、残念ながら、Flickity画像スライダーで次の問題を解決する方法がわかりません。ブラウザ コンソールに次のエラーが表示されます。

未定義のプロパティ 'x' を設定できません 未定義の
プロパティ 'x' を読み取れません

このcodepen.io の例でわかるように、これらの動作はかなり貧弱です。

PS: コードはこの JQuery プラグインの上で動作します。

画像カルースの水平スクロールを設定するためにさまざまなアプローチを試し、最終的にこれにたどり着きましたが、残念ながら、Flickity画像スライダーで次の問題を解決する方法がわかりません。ブラウザ コンソールに次のエラーが表示されます。

未定義のプロパティ 'x' を設定できません 未定義の
プロパティ 'x' を読み取れません

そして、このcodepen.ioの例でわかるように、これらの動作はかなり貧弱です

PS: コードはこの JQuery プラグインの上で動作します。

通常のマウス ホイールでテストしたときの問題の見方は、実際には指が止まると同時にホイールが停止するため、コンソール ログにエラーが表示されていても、1 か月前に簡単にナビゲートし続けることができました。口をApple Magic Mouseに変更し、強くひっくり返すと、エラーログがまだエラーをカウントしているように気づき、最後に到達するまで続行できません。ノートブックのタッチパッドでまだテストしていませんが、同じ問題のように感じますそこに残り、私は彼らがそれを修正する方法を探しています.

angulars ng-repeatを使用して、metafizzyのflickityフレームワークを使用してコンテンツを動的に表示しようとしています。

しかし、何らかの理由で、アイテムが DOM にロードされると flickity-viewport から押し出されるように見えます。なぜそれが起こるのか、それを回避する方法を知っている人はいますか?

このようにギャラリー内に静的コンテンツを表示すると、ギャラリーは正常に動作します。

HTML : 静的マークアップの例

..その角度の ng-repeat ディレクティブを使用してギャラリーにデータを入力しようとすると、ギャラリーが壊れます。

HTML : NG-REPEAT を使用したマークアップ

ジャバスクリプト

flickity api へのリンク: http://flickity.metafizzy.co/api.htm

flickityという名前の JavaScript プラグインを使用して問題に遭遇しました。これにより、タッチ フレンドリーなスライドショー画像が有効になります。

次のように初期化します。

それはすべて正常に動作しますが、問題は<div ref="carousel"></div>、レンダリング内でターゲットにしている div が変更されてフリック要素になることです。コンポーネントを再レンダリングすると、Uncaught Invariant Violationエラーが発生することがあります。これを克服する解決策があるかどうかを尋ねたかったのですか?

これは、関連コンポーネントをレンダリングする方法です