swiperを用いてスライダーを実装しております。
理想としては、オートプレイでスライダーが常に動いている状態にしたいのですが、
現状では要素ごとに一旦止まる動作が入ってしまいます。
スライド1 スライド2 スライド3
↓
スライド2 スライド3 スライド4(スライド3が中央に来たあたりで一旦止まってスライドの移動が続く)
↓
スライド3 スライド4 スライド5(スライド4が中央に来たあたりで一旦止まってスライドの移動が続く)
上記の「各スライド要素が中央に来たあたりで一旦止まる動作」を無くしたいです。
speedを変更したり、autoplay内のdelayを1にしたりと試してみましたがどうしてもスライドごとに一旦止まる動作が入ってしまいます。
理想はappleのラインナップのところのようにしたいと考えております(スライドを2行にする必要はございません。あくまで動きの理想です)。
https://www.apple.com/jp/apple-tv-plus/?itscg=10000&itsct=atv-0-tv_fp-hro_lrn-apl-200306
以下が実際に記載しているswiperコードとなります。
ご確認のほど、よろしくお願いいたします。
JacaScript
1<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> 2 <script> 3 let mySwiper = new Swiper('.swiper-container', { 4 slidesPerView: 1, 5 speed: 5000, 6 autoplay: { 7 delay: 0 8 }, 9 loop: true, 10 freeMode: true, 11 breakpoints: { 12 765: { 13 slidesPerView: 2, 14 }, 15 1000: { 16 slidesPerView: 3, 17 }, 18 1200: { 19 slidesPerView: 4, 20 }, 21 1600: { 22 slidesPerView: 5, 23 } 24 } 25 }); 26 </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/05 03:58