問題タブ [owl-carousel-2]

Owl Carousel 2スライダーでマイナーな (しかし非常に厄介な) 問題が発生しています。

基本的に、画像のサイズであるため、最大幅が 824px の単一項目のスライダーが必要です。それ以外の場合、スライダーは親の幅の 95% です。

私の問題は、ビューポートのサイズが原因で、スライダーの親クラスがアイテムのサイズを 824 ピクセルの幅 (メイン コンテナーに対して以前に設定した最大幅) 未満に変更した場合、次のようになることです。

EDIT 1:クイック codepen を作成しました。問題を確認するには、通常どおりにページを表示し、手動でサイズを変更して (約 800 ピクセルの幅を試してください)、更新します。

ご覧のとおり、次のアイテムが右側に部分的に表示されています。アクティブなアイテムがコンテナーを 100% 満たす気がしなかったようです。奇妙なことに、これはページがこのビューポート幅でロードされた場合にのみ発生します。ブラウザ ウィンドウのサイズを手動で変更して問題を再現しようとすると、すべて問題なく動作し、意図したとおりに動作します。パディング（画像の境界線とアイテムのパディングを押して離す）で「修正」しようとすると、手動でウィンドウのサイズを変更すると、奇妙なことが起こります。つまり、オプションではありません。

任意のビューポート サイズで項目がスライダー幅を 100% 満たすようにするにはどうすればよいですか?

編集 2: jQuery スクリプトが断続的に動作する問題である可能性が非常に高いと誰かが示唆しました。私は書いていないjQueryを読むのが得意ではないので、それについてセカンドオピニオンを得ることができますか?

フクロウ カルーセル 2 で利用できます。[次へ] ボタンをクリックして追加のページ画像を表示する場合は? デフォルトでは、次の項目のスライドが 1 つしかないためです。

それがどのように機能するかの例：

私が欲しい

どうも

angularjs 動的コンテンツでフクロウ カルーセルを読み込めません。

私はこの（編集された）htmlを使用します：

そして、私のアプリへのこの（編集された）ディレクティブ：

しかし、新しいコンテンツをロードするたびにカルーセルをロードできません。jquery イベントのバインド、コントローラーでの関数の呼び出しなどを試みます。

PD: 私は ng-routes を使用し、html を動的にロードします。

lazyload オプションを true にして owlcarousel 2 を使用しています。ユーザーがカルーセルの最初の画像を見ている間にバックグラウンドで次のスライド画像のプリロードを開始したいので、ユーザーはローダーを表示せず、次のスライドで読み込まれた画像を直接見ることができます

ここに私のhtmlコードがあります

ここに私のJavaScriptコードがあります

クリックするとスライドトグルをアクティブにする3つのdivがあります。そして、すべての div の中にフクロウのカルーセル スライダーがあります。

1 つの div をトリガーするとスライダーが表示されますが、ウィンドウのサイズを変更しない限り、他の div スライダーをクリックしても表示されません。

すべてのdivのスライダーのスライドトグルで更新をトリガーするにはどうすればよいですか?

スライドトグルでこれを試しましたが、機能しません:

テスト ページを設定して owl.carousel.2.0.0-beta.2.4 を試すと、IE では問題なく動作しますが、Chrome (Win10) では、クリックしてドラッグすると画像が消えるという問題があります。消える具体的な方法があるとは言えません。ドラッグを止めると、元に戻ります。

2 つの異なる Win10 システムでこの問題が発生しました。Chromeを搭載したHTC電話では、それほどではありません。

私がテストしたシステムでは、デモにはこの問題はありません。スムーズにドラッグできますが、画像のないテキストだけだと思います。

何かを間違って設定しましたか? Chrome でうまく機能しないフォールバックを使用していませんか?

http://www.crystalvalleycomputers.com/dev/atlasnew/owltest.php

Owl Carousel v2 で表示される現在の要素の ID を取得するにはどうすればよいですか?

最初のスライドが表示されている場合、コールバックは「1」を返します。

Telescopeで owl-carousel を使用しようとしていますが、動作させることができません。この時点では、動的データはありません。以下は、私が従った手順です。

1. 望遠鏡パッケージを作成します。
2. テーマ Zeiss を追加。
3. owl-carousel パッケージを追加する

次に、望遠鏡アプリがユーザーが気に入った投稿のリストを表形式で表示するユーザープロファイルで、画像をカルーセルとして表示したいと考えています。（これが最終目標であることに注意してください。今のところ、基本的なフクロウのカルーセル機能を動作させようとしています）

以下は私が取った手順です。

User_profile テンプレートに新しいテンプレートを追加しましたcarousel

それが終わったら、以下のようにテンプレートをサポートするjsファイルを追加しました。

これにより、カルーセルが機能し、下のビデオでわかるように、10 の異なる要素が表示されます。自動再生も機能しますが、ボタンやドットは機能しません。私は無数のことを試し、多くの記事を参照して、タイムアウトを変更したり、自動実行を追加したりしました。ただし、これは静的なリストです。

なぜうまくいかないのかわからないので、どんな助けでも素晴らしいでしょう。

https://youtu.be/Ljoxw561Eic

340x360 などのサイズの画面でカルーセル スクリプトが表示されないようにする方法を探してください。ここにスクリプト: http://owlgraphic.com/owlcarousel/#customizing

前もって感謝します