swiper.jsを使っています。
PCでは動かないようにして、タブレット、スマホ時のみに実装したいです。
下記サイトを参考にして、やってみましたが、
複数設置の方法がわかりません。
https://nashiolife.com/blog/39/
同一ページにもうひとつスライドを設置したいです。
※オプション設定をそれぞれ変えたいため
■一つ目
<div id="slide1"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="slide-img"><img class="swiper-lazy" src="img/39/01.jpg" alt="" /></div> <p class="slide-caption">あああああ</p> </div> <div class="swiper-slide"> <div class="slide-img"><img class="swiper-lazy" src="img/39/02.jpg" alt="" /></div> <p class="slide-caption">ああああ</p> </div> </div> </div> </div>
■二つ目
<div id="slide2"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="slide-img"><img class="swiper-lazy" src="img/39/01.jpg" alt="" /></div> <p class="slide-caption">あああああ</p> </div> <div class="swiper-slide"> <div class="slide-img"><img class="swiper-lazy" src="img/39/02.jpg" alt="" /></div> <p class="slide-caption">ああああ</p> </div> </div> </div> </div>
let swiperPC; let swiperSP; var slidePC = function() { swiperPC = new Swiper('.swiper-container', { speed: 1000, slidesPerView: '1', spaceBetween: 0, loop: true, navigation: { nextEl: '.slide-next', prevEl: '.slide-prev', } }); } var slideSP = function() { swiperSP = new Swiper('.swiper-container', { speed: 1000, slidesPerView: '1.364', spaceBetween: 20, centeredSlides: true, navigation: { nextEl: '.slide-next', prevEl: '.slide-prev', }, }); } const breakPoint = window.matchMedia('(min-width: 769px)'); var switching = function() { if(breakPoint.matches) { if(swiperSP !== undefined) { swiperSP.destroy(true,true); } slidePC(); } else { if(swiperPC !== undefined) { swiperPC.destroy(true,true); } slideSP(); } } breakPoint.addListener(switching); switching();
上記の記述を
どのようにすれば、PCではswiperを無効にし、タブレット、スマホでのみで動くようになりますでしょうか?
ご教授願います。
あなたの回答
tips
プレビュー