前提・実現したいこと
下記条件分岐を実装しました。
■ 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
リセットするなどの解決方法はあるのでしょうか。。
どうぞ教えてください。
回答2件
あなたの回答
tips
プレビュー