###前提・実現したいこと
モーダル表示した中にbxsliderでカルーセルコンテンツを作りたいです。
###発生している問題・エラーメッセージ
bxsliderが発火するクラスをモーダル表示ボタンクリック時に渡して表示させています。
普通に見る分には表示されるのですが画面幅を変えてからモーダルを再度表示させるとカルーセルの中身が表示されなくなってしまいます。
###該当のソースコード
html
1<div id="m-modal-lineup"> 2 <!-- カルーセル--> 3 <div class="lineup-carousel"> 4 <div id="modal-carousel"> 5 <section> 6 カルーセルのコンテンツ1 7 </section> 8 <section> 9 カルーセルのコンテンツ2 10 </section> 11 <section> 12 カルーセルのコンテンツ3 13 </section> 14 </div> 15 </div> 16 <!-- /カルーセル--> 17</div>
javascript
1$(document).on('click', '.js-lineup-modal', function(){ 2 $('#modal-carousel').toggleClass('js-lineup-carousel'); 3 $('.js-lineup-carousel').bxSlider({ 4 auto: false, 5 pause: 5000, 6 speed: 1000, 7 pager: true, 8 displaySlideQty: 1, //一画面に表示する数 9 moveSlideQty: 1, //移動時にずれる数 10 prevText: '', 11 nextText: '' 12 }); 13});
###補足情報
モーダルは「colorbox.js」を使用しています。
手も足も出ないのでご教授いただける助かります。
あなたの回答
tips
プレビュー