問題タブ [flickity]

私は自分のウェブサイトでこのスライダーを使用しています: http://flickity.metafizzy.co

画像は押しつぶされた状態で読み込まれますが、更新すると正常に表示されることがあります。おそらく読み込みの問題だと思ったので、画像のサイズを小さくしましたが、それは助けにはなりませんでした。次に imagesLoaded を追加しましたが、これも何もしませんでした。

画像の読み込み方法のスクリーンショットを添付しました。ありがとう！

metafizzyによる flickityを使用して、無限にドラッグ可能なカルーセルに取り組んでいます。

freeScroll + wrapAround Props を使用すると、ドラッグ時に次のセルを選択すると非常にうまく機能します。

jsfiddle

しかし、セルを強く「ドラッグ」して「投げる」と、選択したセルがビューポートからアニメーション化されることがあります。
選択されたセルのチェックはmouseUpで発生すると思いますが、スロー後のアニメーション中にも選択チェックが発生するとよいでしょう。

誰かがそれを達成する方法を知っていますか?
フリースクロ​​ールの無限スライダー/カルーセルへのリソースも大歓迎です。

Codrops の記事/実験を使用して、地元のグループが会議で使用するインタラクティブな環境を作成しました。これに関する問題は、デフォルトの対話があまり直感的ではないことです。テンプレートは Flickity.js と classie.js のように見えるものを使用して、私が問題を抱えているこのスライド インターフェイスを作成しました。

このページは次の場所にあります。

www.eyeconic.tv/ky-ffa/

問題: view-full を有効にする唯一の方法は、html 要素をクリックすることです。

// スタックがアクティブになった後、その下のサムネイルを作成するために使用される最初の .stack-item をクリックして、フル ビューをアクティブにできるはずです。この div 全体をクリック可能にする必要があります。ユーザーは画面全体のあらゆる場所に触れており、実際にタイトルをクリックして目的のアクションを行っているわけではありません。これが理にかなっていることを願っています。

つまり、スタック タイトルと各スタックのタイトルの下の画像をクリックして、スタックを画面上のフル ビュー モードにプルできるはずです。次に、x または画面上の他の場所をクリックして、完全なビューを閉じます。

以下は main.js にあり、参照しているイベントを作成するために見つけたリファレンスです。

http://codepen.io/Thisisntme/pen/rVRyJEは私のウェブサイトのテストです。flickity カルーセルを追加しようとしていますが、何らかの理由で div の 2 番目の画像がレンダリングされません。これは、他のすべての html および css 要素を除いたカルーセルです。http://codepen.io/Thisisntme/pen/waOeWa

CSS:

画像リンクが良好であることの証明

ああ、jQuery はありません。

編集: まだ気にしている方のために、画像はもう機能しません。Google ドライブでは、サーバーからホストすることはできなくなりました。

インデックス ページがあり、インデックス ページ レイアウトに ajax を介してさまざまな単一ページを読み込みます。すべての単一ページには、フリック スライダーがあり、すべてのスライダーを個別に (前/次) 制御できますが、キャプションに問題があります。1 つのスライダーからキャプション情報を取得してすべてのスライドショーに出力するだけですが、各スライダーに適切なキャプションを取得するにはどうすればよいですか?

キャプションを取得するためにこれを持っています

この

何か案は？

2 つ目の問題があります。スライダーを ajax 経由で読み込むと、スライダーが 1 ～ 2 秒間少し破壊されているように見えますが、これを回避する可能性はありますか?

どうもありがとう！

これは本当に私を夢中にさせます-すべてがうまく見え、うまく機能しますが、サムネイルのクリックイベントは何もしません-とにかくこれをデバッグして何が起こっているのかを理解します-誰かがこれを修正する方法を知っていることを願っています-ありがとう-これは私のコード: