ブレイクポイントでのJSの処理の切り替えについて

Question

前提・実現したいこと

レスポンシブサイトにおいて、bxSliderのmodeオプションをPC時とスマホ時で値を切り替えたいと思っています。現状ブレイクポイントで判定まではできているのですが、リロードをしないと発火しない状態から、ブレイクポイントの切り替えのときに、リアルタイムで発火させる状態にしたいと思っています。
setTimeOutを使ってできるのかと思ってはいるのですが、具体的な解決案がわかりません。
お力添えよろしくお願い申し上げます。

該当のソースコード

$(function() {
  //PCの場合
  if (window.matchMedia( '(min-width: 769px)' ).matches) {
    $('.bxslider').bxSlider({
      mode: 'vertical'
    });
  //SPの場合
  } else {
    $('.bxslider').bxSlider({
      mode: 'horizontal'
    });
  };
});

補足情報（FW/ツールのバージョンなど）

jQuery v1.12.4
bxSlider v4.2.12

Answer 1

直接オプションをとる方法がないので.bx-cloneの状態を見て処理するのはどうでしょうか。
sliderには初回設定時のbxSliderが入っているものとして

$(function() {
  var slider;
  if (window.matchMedia('(min-width: 769px)').matches) {
    // PCの場合
    slider = $('.bxslider').bxSlider({
      mode: 'vertical'
    });
  } else {
    //SPの場合
    slider = $('.bxslider').bxSlider({
      mode: 'horizontal'
    });
  };

  $(window).on('resize', function(event) {
    const float = $(slider.selector).find('.bx-clone').css('float');
    if (window.matchMedia('(min-width: 769px)').matches) {
      if (float === 'left') {
        slider.reloadSlider({
          mode: 'vertical'
        });
      }
    } else {
      if (float === 'none') {
        slider.reloadSlider({
          mode: 'horizontal'
        });
      }
    };
  });
});

(17:38修正)

Comments

[halwo]

ご回答ありがとうございます。大変申し訳ありません、これ以外の部分はどのようにしたらよいということでしょうか？　飲み込みが悪くすみません。

[x_x]

変数sliderのところですかね？
提示コード中の呼び出しで
var slider = $('.bxslider').bxSlider({});
とでも書けばOKです。

[halwo]

ご回答ありがとうございます。別の不具合が発生したものの質問内容に関してはクリアできました。すみません、お聞きしても理解できないかもしれないのですが、直接オプションをとる方法がないというのはどういうことだったのでしょうか？

[x_x]

現状設定されている'mode'の値を取りたかったけど取れなかったということです。

[halwo]

それは今回のbxSliderのプログラムにおいて、そうだったという認識でよろしいのでしょうか。ありがとうございました。

Answer 2

以下のような感じでイベントリスナーに張り付ける感じでしょうか
詳しくは以下をご覧ください。
参考サイト

document.addEventListener('DOMContentLoaded', function () {

  var mql = window.matchMedia('(min-width: 769px)');

  function touchBreakPoint(mql) {
    if (mql.matches) {
      $('.bxslider').bxSlider({
        mode: 'vertical'
      });
    } else {
      $('.bxslider').bxSlider({
        mode: 'horizontal'
      });
    }
  }

  // ブレイクポイントで発火
  mql.addListener(touchBreakPoint);

  // 初回
  touchBreakPoint(mql);
});

Comments

[halwo]

ご回答ありがとうございました。まさにやりたいことは同じかと思うのですが、試したところウィンドウサイズを変更した後、リロードしないと発火しませんでした。

[mikan_s4n]

念のために確認ですが、IE10以上のモダンブラウザですよね。モダンブラウザと仮定して考えれば回答のコードだとイベントリスナーの貼り付けが上手くいかず、ページ表示の初回のみ実行されている感じになりますかね…。
一応if-elseの中で console.log("Now vertical"); と console.log("Now horizontal");のようにログを仕込んで、サイズを変えた時にif-elseに到達してるかどうかのしてみてはいかがですか？確認はchrome等の開発者ツールで出来ますし、お手軽です。
その上で、window.matchMediaが動いていてbxSliderがコケてるのか　といった具合に問題の切り分けをしていきましょう

[halwo]

ご回答ありがとうございます。console.logを入れて確認したところブレイクポイントでログの判定は切り替わっておりました。bxSlider側のオプションが発火できていないようです。質問ですが、ブレイクポイントで一度だけ強制的にリロードするようにすることは可能でしょうか？