javascriptのswiperについて、指定番号のスライド画像をスキップさせることは可能でしょうか?
-求めてる機能
・タブレットサイズ時(768px)→1,3,5の順番で画像がスライドし、2枚目,4枚目画像をスキップさせる方法が知りたいです。
-現在の機能
PCサイズ時,1~5枚と順番に1秒表示→1秒かけて自動切替(計2秒かけて変わるスライド)
Javascript「swiper」使用してます。
-今詰まってる状況
下記コードより、2枚目,4枚目を「visibility: hidden;」にすることで非表示にすることはできましたが、
その分、手前の画像の表示時間が伸びただけになりました。(1枚目と3枚目が倍の2秒表示されます)
HTML
1 <section class="cover"> 2 <div class="swiper-container"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide 1-img"></div> 5 <div class="swiper-slide 2-img"></div> 6 <div class="swiper-slide 3-img"></div> 7 <div class="swiper-slide 4-img"></div> 8 <div class="swiper-slide 5-img"></div> 9 <div class="swiper-slide 6-img"></div> 10 </div> 11 </div> 12 </section>
css
1@media screen and (max-width: 768px) { 2 .cover .4-img, 3 .cover .6-img { 4 visibility: hidden; 5 }
Javascript
1 let swipeOption = { 2 loop: true, 3 effect: 'fade', 4 autoplay: 5 { 6 delay: 1000, 7 disableOnInteraction: true, 8 }, 9 speed: 1000, 10 } 11 new Swiper('.swiper-container', swipeOption);
といった感じなのですが、2枚目,4枚目をスキップする方法があれば教えてください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。