【JS】スライダーの再生速度を設定しているのに反映されない（Swiper使用）

スライダーでウェブページ上の画像を自動再生したいと思っています。
再生速度を下記のように設定したのですが、ブラウザで確認すると反映されません。
画像がすごい速さで次々と再生されてしまいます。

何が原因か、ご指摘頂けるとありがたいです。
よろしくお願い致します。

JS
1var mySwiper = new Swiper ('.swiper-container', {
2	loop: true,
3	pagination: '.swiper-pagination',
4	nextButton: '.swiper-button-next',
5	prevButton: '.swiper-button-prev',
6
7	autoplay: {
8		delay: 3000, // スライドが切り替わるまでの表示時間(ミリ秒)
9		stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
10		disableOnInteraction: true // ユーザーのスワイプ操作を検出したら自動再生を中止するか
11	},
12});

HTML
1<div class="swiper-container">
2	  <!-- Additional required wrapper -->
3    <div class="swiper-wrapper">
4		<!-- Slides -->
5      <div class="swiper-slide" style="background-image: url('img/1.jpg');"></div>
6      <div class="swiper-slide" style="background-image: url('img/2.jpg');"></div>
7      <div class="swiper-slide" style="background-image: url('img/3.jpg');"></div>
8      <div class="swiper-slide" style="background-image: url('img/4.jpg');"></div>
9      <div class="swiper-slide" style="background-image: url('img/5.jpg');"></div>
10    </div>
11    <!-- If we need pagination -->
12    <div class="swiper-pagination"></div>
13
14    <!-- If we need navigation buttons -->
15    <div class="swiper-button-prev"></div>
16    <div class="swiper-button-next"></div>
17</div>

CSS
1swiper-container {
2	width: 100%;
3	height: 400px;
4}
5.swiper-slide {
6	padding-top: 180px; /* 画像位置の調整用 */
7	text-align: center;
8	color: #fff;
9	font-size: 30px;
10    background-repeat: no-repeat;
11    width: 1261px;
12    background-size: cover;
13    background-position: center center;"
14}

行動規範の内容に同意します

回答1件

ベストアンサー

speed を指定していないからでは？

【Swiper API】
http://idangero.us/swiper/api/#parameters

投稿2018/08/30 14:09

kei344

総合スコア69398

nicosan

2018/08/30 14:24

ご回答ありがとうございます！ speedを指定したら、「スライドが切り替わるトランジション時間」は遅くすることができました。ただ、delay（スライドが切り替わるまでの表示時間）の値を変えても画像の表示時間が変わらないのです・・。これはなぜなんでしょうか？

kei344

2018/08/30 14:27

delay は autoplay の delay とは別の delay もありますが、どちらも設定されているのでしょうか。

nicosan

2018/08/30 14:51

autoplayのdelayしか設定していません。試しにautoplayではないdelayも設定してみましたが、反映されませんでした。

kei344

2018/08/30 15:25

そもそも提示されたコードだけでも「すごい速さ」にはなっていない気がするのですが、どの速度を変えたいのかがわかりません。 [提示のコード＞ https://jsfiddle.net/q61bpaut/ [delay が倍の6000＞ https://jsfiddle.net/q61bpaut/1/

nicosan

2018/08/30 15:56

シェア頂きありがとうございます！「すごい速さ」と言ったのはspeedを指定していない時にどんどんスライドが切り替わってしまったからです。 https://jsfiddle.net/o1axq8h7/9/ speedを指定すると切り替わりの速度は遅くなるのですが、画像が留まることなく次のスライドに切り替わってしまいます。 https://jsfiddle.net/o1axq8h7/7/ スライダー部分は同じコードのはずなので、他の要因があるのでしょうか？

kei344

2018/08/30 16:08

とりあえずSwiperのバージョンが違うので最新の物に変えてみては。

nicosan

2018/08/30 16:27

最新のバージョンに変えたら問題が解消されました！最後までアドバイスを頂き、どうもありがとうございました。

行動規範の内容に同意します