if文でライブラリの条件分岐がうまく動かない

Question

前提・実現したいこと

下記条件分岐を実装しました。
■　width480px以上：ライブラリfancybox使用
https://fancyapps.com/fancybox/3/
■　width480px以下：ライブラリswiper使用
http://idangero.us/swiper/

該当のソースコード

////////* width480px以上_fancybox *////////
function cnt_fancy(){
$('[data-fancybox]').fancybox({
loop : true, // 複数画像表示時に最初と最後をループさせる
toolbar : false, // ツールバーの非表示
smallBtn : true, // 小さいCloseボタン利用する
iframe : { // iframe 関連の処理
preload : false //iframeのプリロードをしない
}
});
}

///////width480px以下_swiper///////
function cnt_swiper(){
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 20,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
}

function cnt_change(){
var w_width = $(window).width();
if(w_width > 480){
cnt_fancy();
}
else{
cnt_swiper();
}
}
////////* 読み込まれたら ////////
$(function () {
cnt_change();
});
//////// リサイズされたら *////////
$(window).resize(function() {
cnt_change();
});

==================================

試したこと

以上のように、条件分岐を制作しましたが、
スマホを縦の状態で読み込んで（width480px以下）、横（width480px以上）にしても
ライブラリのswiperが消えません。逆も同じ、一回ライブラリのswiperを読み込むと、
条件分岐で該当しない場合でも消えてくれません。

該当のページ

http://www.flannelsofa.com/shop/harban_new.php

該当のタグ

swiper-container

リセットするなどの解決方法はあるのでしょうか。。
どうぞ教えてください。

Comments

[m.ts10806]

コードはマークダウンのcode機能をご利用ください。(質問は編集できます)

[beth]

すみません、初めての投稿だったので、やり方がわかりませんでした。以後気をつけます。

[m.ts10806]

質問は編集できるので適宜ご対応ください。　code機能は質問投稿画面でコード部分を選択して<code>機能を押せばよいです。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

リセットするなどの解決方法はあるのでしょうか。

destroy()というメソッドがあります。
こちらの質問が参考になるかと。
JavaScript - swiper.jsでウィンドウ幅によって処理を切り替えたい｜teratail

Comments

[beth]

ご回答ありがとうございます。
リンクに習って下記に変更しましたが、
エラーになってしまいます。入れる場所がちがうのでしょうか。。

function cnt_change(){
var w_width = $(window).width();
if(w_width > 480){
cnt_fancy();
}
else{
　cnt_swiper();
}
// mySwiper.update();
var prm = swiper.params; // パラメータを保存
swiper.destroy( true, true ); // 削除
swiper = new Swiper ('.swiper-container', prm );
}

[Lhankor_Mhy]

エラーの内容はどういうものでしたか？
undefined には destroy というメソッドがない、とかそんな感じでしたか？

[beth]

自分で解決しました！！
削除の場所をcnt_swiper();を使っていないcnt_fancy();に、
「swiperが動いていたら」が足らなかったです。
ありがとうございました。

function cnt_change(){
var w_width = $(window).width();
if(w_width > 480){
cnt_fancy();
// mySwiper.update();
if (typeof swiper != "undefined"){// swiperが動いていたら
swiper.destroy( true, true );// 削除
}
}
else{
cnt_swiper();
}
}

Answer 2

function cnt_change(){
if (typeof swiper != "undefined"){// swiperが動いていたら
swiper.destroy( true, true );// 削除
}
var w_width = $(window).width();
if(w_width > 480){
cnt_fancy();
}
else{
cnt_swiper();
}
}