Webサイトでたびたび見られる、コンテンツ・スライダー機能。
最近は、Swiperというスライダーを使用することが多いです。
こちらの基本的な使い方は、いろんな記事で紹介されています。
今回、
・自動再生有り（autoplay）
・ページネーション有り（スライドの下にある小さい●のリスト）
・ページネーションをクリックしてスライド移動可能
という設定でスライダーを作成しました。
実際に動かしてみると、ページネーションをクリックした後に、自動再生が再開されず止まったままに…！
再生を再開させるオプションがあるのかな？と思い検索したのですが、うまく見つけることができず、配布元のページを確認しました。
配布元にはSwiper使用例がたくさん掲載されているので、今回作りたいスライドに一番近い使用例のソースを見てみることに。
自動再生は、autoplayというオプションで指定するのですが、配布元のソースには
autoplay: { delay: 2500, disableOnInteraction: false, },
と記載されていました。
私の作ったスライダーではこの「disableOnInteraction: false,」というオプションを使用していなかったので、こいつが怪しいな…！と思い、こちらのページで詳細を確認したところ、ビンゴ！
ユーザー側のなんらかの操作（今回だと、ページネーションのクリック）のあとに自動再生を再開するかどうかを設定できるオプションでした。
デフォルトではこれがtrueになっており、それだと再開されないのです。
また、オプションをこのように｛｝でまとめて書く書き方も、今回初めて知りました。
なので使ってみようと思ったのですが、この書き方だとなぜか自動再生のスピードがうまく制御されず…。（delay:3000〜4000msで指定しても、なぜか300msという10倍近い早いスピードで再生されてしまう）
なのでいつも通りの記述法で書くことに。
｛｝を外す場合は、autoplayDisableOnInteraction:false, と書けばOKです。
そしてめでたく思い通りのスライダーができました！良かった！
このブログを書くときにもう一度swiperのことを検索していたら、「autoplayDisableOnInreraction」のオプションを紹介してくださっている記事を発見しました！
その他のオプションも詳しく書いてくださっているので、ぜひ御覧ください！
Sponsored
