Swiperを使った自動スクロールについての質問です!
現在Swiperを使い、スライドショーの作成をしているのですが、スライドとスライドの切り替えの際の時間をどうしてもなくしたい(日本語が下手で伝わりにくく申し訳ないです)のですがどのように記述すればよいのかわかりません。
今現在は
js
1var swiper = new Swiper('.swiper-container', { 2 slidesPerView: 8, 3 spaceBetween: 30, 4 initialSlide: 2, 5 loop: true, 6 autoplay: 1, 7 autoplayDisableOnInteraction:false, 8 grabCursor: true, 9 reverseDirection: true, 10 freeMode: true, 11 speed: 4000, 12 });
このように記述をしております。
完成イメージはこのような感じです
https://chocolat5.com/demo/loop-image-animation/
皆様にお助けいただければ助かります!
上記画像のパソコンやスマートフォンの画像を、右から左に流れるようにアニメーションをさせたいと考えています。
また、こちらHTMLとSCSSになります。
html
1<div class="swiper-container"> 2 <div class="swiper-wrapper"> 3 <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/kaden.png"></div> 4 <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/tablet.png"></div> 5 <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/desktop.png"></div> 6 <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/note.png"></div> 7 <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/smart.png"></div> 8 <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/parts.png"></div> 9 <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/etc.png"></div> 10 <div class="swiper-slide"><img alt="ロゴ" src="<?php echo get_template_directory_uri(); ?>/images/gaming.png"></div> 11 </div> 12 </div>
scss
1.swiper-container { 2 padding: 3em 0 6em; 3}
あなたの回答
tips
プレビュー