問題タブ [owl-carousel-2]

さて、私は今owl-carousel-2プラグインを使用しています。

そして、次の問題が発生します。

マークアップ コード:

問題は：

$owl.owlCarousel();非表示状態のステートメントで初期化すると、そのサイズは初期化されません。

そのため、そのコントロールを表示すると、コントロールが乱雑に表示されます。

しかし、ウィンドウのサイズを変更すると、再レンダリングがトリガーされているように見えました。コントロールはコンテンツをレンダリングし、適切に表示します。

それで、この再レンダリング（またはリフレッシュ）メソッドをトリガーする方法があるかどうか疑問に思っています。

コントロールが乱雑に表示されないようにするため。

ドキュメントとソースを読み込もうとしましたが、まだ良い解決策がありません。

助けてください。

次のコードブロックがあります。私がやろうとしているのは、スライド ショーの現在の画像の src を取得することだけです。機能していません。スライドを細かく変更しても、コンソールには何も表示されません。

HTML:

jQuery:

現在、カルーセルのニーズに OwlCarousel2 を使用しています。URL ハッシュ ナビゲーションがあるため、OwlCarousel1 ではなく OwlCarousel2 を選択しました: http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html

上記は、カルーセルを生成するために使用する PHP コードです。14 個の画像があるため、コードは 14 個の画像すべてをループし、data-hash各画像にオブジェクトを追加します (アンカーのナビゲートの必要性のため)。

以下は私のJavascriptコードです：

ここで、ユーザーが手動で URL にハッシュを追加すると、上記のカルーセルは完全に機能します。つまりsomeurl.com/voting.php#4、4 番目の画像に移動します。

ただし、私がやりたいのは、URL が に移動した場合、someurl.com/voting.php各画像をスクロールするときに、それに応じて URL がアンカーを更新することです。なんで？ユーザーが画像 ( を含むhref) をクリックして前のページに移動すると、最初の画像に移動するという既定の動作ではなく、見ている画像に戻ることができます。

OwlCarousel2 API (実際には OwlCarousel1 とはかなり異なります) によると、現在のアイテムを取得するには、次のようにします。

具体的には、 を使用しevent.item.indexます。私のコードはまさにそれをしました！しかし、現在のインデックスを取得できません! 私のエラーは次 のとおりですUncaught TypeError: Cannot read property 'item' of undefined。Chromeのコンソールの下。

JS の達人からの助けをいただければ幸いです。

StackOverflow 全体と OwlCarousel2 API を検索して、これができるかどうかを調べてみましたが、うまくいきませんでした。

このスレッドも確認しました:更新せずに現在の URL にアンカー名を追加 / 削除する

http://owlgraphic.com/owlcarousel/demos/randomOrder.html

owl carousel 2 で同じことを行うにはどうすればよいですか? http://www.owlcarousel.owlgraphic.com/

今アップグレードを行い、ランダムにする方法を理解できず、この古いカルーセルが機能しなくなりました:(

新しい Functionality owl carousel 2 で同じことを実装する方法を教えてください。

ありがとうございました！

Owl Carousel を操作してコンテンツを追加できるようになったことを検出しようとしています。以下のスクリプトはカルーセルを開始しますが、初期化されたイベントはトリガーされません。

同期された 2 つのフクロウ スライダーを含むスライダーに取り組んでいます。sync1 はメイン スライダーで、sync2 はサムネイル スライダーです。2 番目のスライダー sync1 の要素の 1 つをクリックすると、適切なスライドに移動します。今私の問題に行きます：

ユーザーがサムネイルのいずれかをクリックすると、クリックした要素に緑色の境界線が表示され、別の要素がクリックされるまでそこにとどまる必要があります。

jquery .addClass と .css を使用しようとしましたが、何も起こりません。

クリックした要素まで保持する「position:absolute」のdivを追加したほうがいいと思うのですが、やり方がわかりません。助けてください！:)

これが私のjsです

これは問題のページです: http://k2ld.91dev.com.au/project/balwyn-residence/

カルーセルは を使用しautoheight:trueます。

Dolphin、iPhone、Google Nexus 4 (Chrome 開発ツールで表示した場合) などの特定のモバイル ブラウザーでは、.owl-wrapper-outerコンテナーに小さなインラインの高さが適用され、最初の画像が切り取られます。

左にスワイプして戻ると、高さが再計算され、すべて問題ありません。

私のフクロウコードは次のようになります( a 内document.ready):

最初は Owl Carousel 1 を使用していましたが、バージョン 2 に切り替えて問題が解決したかどうかを確認しましたが、問題は解決しませんでした。

画像が完全にロードされたら、カルーセルの高さを計算するにはどうすればよいですか?

フクロウのカルーセル 2 に少し問題があります。

これは私のサイトの古いバージョンです。http://lukaszradwan.com/pl/ メインのスライダーを見てください。これはフクロウのカルーセルではありません。何かわかりませんが、問題なく動作します (高さは 100% に設定されています)。また、重すぎます。

フクロウのカルーセルに変更しました。これを参照してください http://lukaszradwan.com/ レスポンシブですが、高さを 100% に設定できません。

JS

HTML

これを行う方法について何かアイデアがあれば、私と共有してください。前もって感謝します。