ブートストラップアコーディオン内のフクロウカルーセル2は、ウィンドウのサイズ変更でのみ機能しますか？
Saumya Rastogi
フクロウカルーセル2を使用しています。ブートストラップアコーディオンパネル内にフクロウカルーセルをロードしたいと思います。私のコードは次のようになります...
HTMLコード：
<div class="panel-group users_block_accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#usersPanel" aria-expanded="false" aria-controls="collapseTwo">
<h4 class="panel-title">
View Users in the Panel
</h4>
</a>
</div>
<div id="usersPanel" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="owl-carousel owl-theme">
<div>
<img src="http://placehold.it/500x500" alt="">
</div>
<div>
<img src="http://placehold.it/500x500" alt="">
</div>
<div>
<img src="http://placehold.it/500x500" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
jQueryコード：
jQuery(function() {
var $carousel = $(".users_block_accordion .owl-carousel").owlCarousel({
navigation: true,
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
],
items: 3
});
});
また、何が起こっているかのスクリーンショットプレビューを共有しています。
スクリーンショット1（ページの読み込み時-カルーセルは次のようになります）
スクリーンショット2（画面のサイズを変更した後-カルーセルは次のようになります）
ページが読み込まれるとすぐにこの読み込みを行うのを手伝ってください..スクリーンショット2のように見えます!!
アビシェク
示されているアコーディオンでフクロウのカルーセルを開始する必要があります。ブートストラップアコーディオンは「shown.bs.collapse」を起動します。ドキュメント
$('#accordion').on('shown.bs.collapse', function () {
var $carousel = $(".expert_block_accordion .owl-carousel").owlCarousel({
navigation: true,
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
],
items: 3
});
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
ワンクリックトレーディングウィンドウのロットサイズフィールド入力の値をエキスパートアドバイザーコードで変更することは可能ですか？
- 2
コントローラのウィンドウサイズ変更セット変数が機能しない
- 3
ウィンドウのサイズを変更すると、左からモーダルカットをブートストラップします
- 4
ブートストラップ列内のリンクは、ウィンドウのサイズ変更時にクリックできなくなります
- 5
フクロウカルーセルナビゲーションドットはアクティブクラスをスムーズに変更します
- 6
ChartJSは、ウィンドウのサイズが変更されるまで、ブートストラップタブ内にグラフを描画しません
- 7
jQueryアコーディオンのGoogleマップはjsFiddleで機能しますが、ウィンドウが手動でサイズ変更されるまでマップがサーバーに読み込まれません
- 8
ブラウザウィンドウのサイズが変更されると、ブートストラップ列がオーバーラップします
- 9
Word でレスポンシブ コンテンツを作成する方法はありますか? - ウィンドウの再フォーマット/フローでコンテンツをウィンドウ サイズの変更にするには?
- 10
フクロウカルーセル2サイズ変更ウィンドウのバグ
- 11
Linux フレーバーの OS システムは、ファイルを検索するためのウィンドウ エクスプローラーのクイック ナビゲーション機能をサポートしていますか?
- 12
ダブルバッファリングをオンにすると、リストコントロールが壊れ、ウィンドウのサイズが変更されて修正されるのはなぜですか？
- 13
ウィンドウのサイズを変更すると、テキストがブートストラップボタンの境界からオーバーフローしたり、ボタンがdiv領域からこぼれたりします。
- 14
tkinterとasyncio、ウィンドウのドラッグ/サイズ変更ブロックイベントループ、シングルスレッド
- 15
ウィンドウのサイズが変更されるまで、ブートストラップモーダル内にGoogleマップをロードすることはできません
- 16
WebでオーディオAPIの使用を開始する：コードはデスクトップブラウザーで機能していますが、モバイルブラウザーでは機能していません
- 17
ウィンドウのサイズを変更するとカルーセルが機能しない
- 18
ウィンドウのサイズが変更されても、カスタムコントロールのサイズは変更されません
- 19
ZK：（zk）ウィジェット内にブラウザーウィンドウのサイズ変更リスナーを追加します
- 20
ポートフォワーディングを使用して、ローカルWebブラウザからEC2Ubuntuインスタンスのローカルホストアドレスにアクセスします
- 21
ウィンドウのスクロールイベントが機能しないのはなぜですか？
- 22
ハイチャート-一連の行のカスタムデータラベルは、ウィンドウのサイズ変更時に消えます
- 23
スクロールバーを取得せずにリモートデスクトップウィンドウのサイズを変更する
- 24
ウィンドウのサイズ変更後、ブートストラップ列が組積造で機能しない
- 25
ウィンドウサイズ変更イベントは、ページの読み込み時にブラウザの画面幅を検出できますか？
- 26
オクターブ：プロットウィンドウの高さ（のみ）を変更します
- 27
ロードおよびサイズ変更ウィンドウでのメディアクエリ動的アクティブ/無効化スクリプト
- 28
javascriptを使用してウィンドウサイズ変更のOrientationDevexpressMenuBarコントロールを変更する
- 29
コンテナのバインド マウント ディレクトリの内容は、ホストからリムーバブル ドライブをマウント/アンマウントした後も変更されません。
コメントを追加