問題タブ [flickity]

flickity carousel libraryを使用して作成されたビデオ カルーセルがあります。こちらは codepen にあります。私が望んでいるのは、ユーザーがカルーセルをスライドさせると、選択したスライドの再生が停止し、選択した中間位置のスライドが再生を開始することです。現在、jQuery を使用して、選択したスライドを最初に再生します。

ただし、スライドの位置が切り替わると、選択したスライドは位置を移動して再生を続けますが、新しいスライドは中央の位置になり、再生されません。

カルーセルがスライドするたびにこれらの機能を更新する方法はありますか?

フリック性を使用すると、同じスライドで同時に 2 つの動作を実行できますか?

• スワイプ (デフォルトおよびより良い 4 つのタッチ スクリーン)
• クリックして次のスライドへ (デスクトップに適しています)

私は次のようなものを試しました：

ここにフィドルがあります：https://jsfiddle.net/francoisromain/fum7Lrac/

クリックは正常に機能しますが、問題はスワイプが 2 枚のスライドを前方に移動することです。

クライアントのサイトを一時的な URL に立ち上げたところなので、CSS と仕上げの仕上げをしている間にクライアントがデータ入力を行うことができます。しかし、サイトを立ち上げたところ、その一部が壊れていることがわかりました。原因は、カスタム投稿のスライダーでした。私のローカルホストで完全に正常に動作するため、なぜ壊れているのかわかりません。

私は Flickity と呼ばれるパッケージを使用していますが、今まで非常にうまくいっていました。私は自分のサイトで他の Flickity スライダーを使用しているので、FLickity 自体に問題がないことはわかっています。スライダーのコードの下に添付しました。

カスタム投稿はシアター プロダクションであり、最終公演日: 終了日 [ACF] に従って注文することを意図しています。

私たちのプロダクション

Dev Tools でコンソール エラーを確認したところ、次のエラーが表示されました。助言がありますか？

Uncaught ReferenceError: jQuery is not defined at jquery-migrate.min.js:2 (index):87 Uncaught ReferenceError: jQuery is not defined at (index):87

コンポーネントがあります：

componentDidMount で、サムネイルの 1 つをターゲットにして、そのスタイルを更新したいのですが、サムネイルのインデックスはわかっていますが、どうすればよいですか?

Angular Flickity ディレクティブを使用して写真のスライドショーを開発しています。FlickityService を使用して、次および前の関数を呼び出して、スライドを次および前のスライドに移動できます。しかし、Flickity api には stopPlay と startPlayer がありますが、どうすればプレーヤーの開始と停止を制御できますか?

HTML:

私の角度コントローラーには、次の機能があります。

angular 2遅延ルーティングを使用して、単純なangular 2 Webサイトを開発しています。flickity スライダーを使用してホームページにスライダーを実装します。問題は、アプリ コンポーネント (ルート コンポーネント) でスライダー コンポーネントを宣言するときです。

app.component

スライダーは問題なくレンダリングされますが、遅延読み込みを使用して router-outlet で呼び出されるホームページ コンポーネントでスライダー コンポーネントを宣言すると、画像は表示されますが、スライダーは機能しません。

ホームページ.コンポーネント

app.routing.ts