問題タブ [owl-carousel]

こんにちは、このコードペンを見ました: http://codepen.io/anon/pen/jJAHLこの投稿から:フクロウのカルーセル、ナビゲーションセンター

カルーセルの下部にアイテムを設定する必要があります。

私は試した

しかし、うまくいきません

私はフクロウカルーセル@バージョン2.0.0を使用しています

問題のサイト: http://miracon.ca/homes/prima/ (「ギャラリー」をご覧ください)。iPhone の Safari ではかなり確実に動作していますが、Chrome iOS には問題があります。画像が正しく中央に配置されていません。ここに私の初期化コードがあります:

「loop:false」を設定すると、うまく機能し、最初の画像が中央に配置されます。"loop:true" を設定すると、期待どおりに中央に配置されません。

ここに例があります: VideoSlide の例

私の問題は、何も表示されないことです。

コードを Owl サイトから効果的にコピーしましたが、何も表示されません。

もともと、私はそれをより大きなサイトでエンコードしていました。これは、カルーセルにのみ適用されるカットダウン バージョンです。私はカルーセルを画像で動作させましたが、ビデオは私を逃れます。どちらかといえば、ビデオはもっとシンプルであるべきだと思います!

バージョン 2 の最新の Owl JS と CSS を使用しました。

JS や CSS は修正していません。ダウンロードした状態です。

ビデオ用の Owl ページと、ビデオ用の Owl カルーセルも使用する Calvin College とのコード比較を行いました。

私が見る限り、私は同じことをしました。

明らかに私はしていません。

デビー

現在の位置番号によって、フクロウのカルーセルの特定の位置にジャンプできる可能性があることを知っています。お気に入り：

一致するIDにジャンプすることはできますか？サムネイルのあるサイトがあり、そのうちの 1 つをクリックするとモーダルが開き、フクロウのカルーセルが適切な位置/一致する位置にあるとします。何かのようなもの：

前もって感謝します！

編集：

ハッシュ URL ソリューションも素晴らしいですが、フクロウのカルーセルがファンシーボックスで開きます...

2番目の編集:

すみません、仕様が変わって難しくなりました。フクロウのスライダーは、fancybox モーダルの iframe で開きます。それにデータを伝達する方法はありますか?!

3番目の編集:

ウェブサイトのコード:

iframe からのコード:

したがって、webiste の href をクリックすると、フクロウのカルーセルが 3 番目の (一致する) 項目にジャンプするはずです。

ユーザーが自分のプロフィールを見ることができるきちんとしたユーザー プロフィール ページの作成は、ほぼ完了しています。Wordpress に統合された Bootstrap フレームワークを使用しています。Bootstrap のタブを使用して多くの情報を取得し、ユーザーにとって明確に保ちます。「AWF I」と「AWF II」という 2 つのメイン タブがあります。これらのタブ内には、ファンドに関する情報と、写真を表示するフクロウ カルーセルがあり ます。 II" 私はこれを取得します: ご覧のとおり、写真/カルーセル自体は非常に小さく、これを克服する方法がわかりません。カルーセルは「AWF I」タブのように表示されるはずです。これがなぜ起こっているのかについてのいくつかのアイデアを与えるかもしれない手がかりがあります: Google Chrome で要素を右クリックして調べると、カルーセルは本来あるべき正しいサイズにポップします: しかし、「AWF I」に戻るとその後、そのカルーセルには小さな画像が表示されるため、基本的には Google Chrome で検査すると役割が切り替わります。

これについての手がかりはありますか？さらに情報が必要な場合はお知らせください。ありがとう！

更新 01

カルーセルを呼び出すために使用するコードは次のとおりです。

Currently I have the following in my $(document).ready(function() AFTER the initialization for the sliders themselves.

This code represents 3 sliders and it works, but I have more sliders.

• When I add more than 4-5+ sliders then it doesn't work (it works on some, not others)

Is there a way to add a bunch of sliders here?

BTW: this is used for when a page size changes without a re-size of the viewport, like toggling a sidebar or tab content.

フクロウのカルーセルで作成された複数のスライダーを含むページがあります。スライダーごとに異なる数の表示項目を定義したいと思います。完璧な解決策は、HTML で (クラスまたはデータとして) 表示可能なアイテムの数を定義することです。私はjQueryを使い始めたばかりなので、次のようなデータ属性を使用して値を渡すことしかできませんでした:

次に、この値をJSの変数に適用し、この変数をこのようなアイテム番号の代わりに設定に追加しました。

最初のスライダーの値がページ上のすべてのスライダーに適用されるため、上記のコードは正しく機能しません。それぞれに異なる数のアイテムが必要です。どうすればこれを達成できますか？

前もって感謝します