質問編集履歴

1 補足情報の追加

PotatoHead

PotatoHead score 18

2016/10/04 12:52  投稿

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

    36552 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    23463 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    16727 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    13099 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る