swiper.jsでウィンドウ幅によって処理を切り替えたい

Question

###前提・実現したいこと
swiper.jsを使って以下ウィンドウ幅でカルーセル表示を切り替えたいです。
・769px以上 → 横スライダー
・768px以下 → 縦スライダー

swiper.js：公式サイト
http://idangero.us/swiper/#.V_sUWSGLSUk

###発生している問題・エラーメッセージ
swiper.jsのオプション「breakpoints」で表示画像数の切り替え等はできるのですが、
縦・横スライダーの切り替えをするには、どうソースを書いていいか分からない状況です。

###該当のソースコード

var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    slidesPerView: 5,
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 60,
    watchSlidesVisibility: true,
    breakpoints: {
      768: {
        direction: 'vertical',
        slidesPerView: 3,
        spaceBetween: 10
      }
    }
});

###補足情報(言語/FW/ツール等のバージョンなど)
swiper.js：API情報
http://idangero.us/swiper/api/

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、URLにはリンクを張ることができますので、編集よろしくお願いします。

[yanocchi]

失礼いたしました、ご指摘ありがとうございます！修正いたしました

Answer 1

$( window ).resize( function(){
	if ( window.innerWidth > 768 ) {
		mySwiper.params.direction = 'horizontal';
	} else  {
		mySwiper.params.direction = 'vertical';
	}
	mySwiper.update();
} ); // 未テスト

とかでどうでしょう。

---

追記：

mySwiper.update() が半端にしか効かないのでmySwiper.destroy( true, true ) で削除し、再生成する方法で。

$( window ).resize( function(){
	if ( window.innerWidth > 768 ) {
		mySwiper.params.direction = 'horizontal';
	} else  {
		mySwiper.params.direction = 'vertical';
	}
	// mySwiper.update();
	var prm = mySwiper.params;	 // パラメータを保存
	mySwiper.destroy( true, true );	 // 削除
	mySwiper = new Swiper ('.swiper-container', prm );	 // 再設定
} );
```**動くサンプル：**[https://jsfiddle.net/umnLfym5/](https://jsfiddle.net/umnLfym5/)

Comments

[yanocchi]

お返事遅くなり申し訳ございません！またご回答ありがとうございます。
試してみたのですが、「Uncaught SyntaxError: Unexpected token :」とエラーが出て実装できませんでした。。。

[kei344]

あ、「.autoplay = direction:」⇒「.direction = 」に読み替えてみてください。
本文も修正します。

[yanocchi]

早々のご対応ありがとうございます！
修正したのですが、上手く動きませんでした。。。
自分でももう少し色々試してみます。

[kei344]

追記しました。

[yanocchi]

お返事大変遅くなり申し訳ございません！
思っていた動きができました！
サンプルまで実装していただきありがとうございます、
大変勉強になりました、本当にありがとうございました！

[ykyk]

失礼します。
コメントのやり方が間違ってたらすみません。
私も同じ問題に当たり、こちらを参考にさせて頂き問題なく動作するようになりました。

スライダーひとつで問題ないのですが複数の場合はうまくリサイズ後うまく動作しなくなってしまいます。
私の場合は992px以下は1枚ずつ、それ以上は２枚ずつスライドしたいのですが
上手くいきません。
どうかご教授おねがいします。

var mySwiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
slidesPerView: 1,
slidesPerColumn: 2,
slidesPerColumnFill: 'row',
breakpoints: {
//991以下
991: {
slidesPerView: 1,
slidesPerColumn: 1,
}
}
});
$( window ).resize( function(){
if ( window.innerWidth > 992 ) {
mySwiper.params.slidesPerColumn = 1;
} else {
mySwiper.params.slidesPerColumn = 2;
}
// mySwiper.update();
var prm = mySwiper.params; // パラメータを保存
mySwiper.destroy( true, true ); // 削除
mySwiper = new Swiper ('.swiper-container', prm ); // 再設定
});
});

[kei344]

To: ykykさん
質問を新たにするほうが回答が望めますよ。

コードはよく見ていませんが、複数の場合はそれぞれ個別に扱ってみては？

[ykyk]

有難うございます。もう少し考えてみてダメそうなら改めて質問立てます。