モーダル表示の中でbxsliderを実行させたい

###前提・実現したいこと
モーダル表示した中に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});