前回Splideの説明して簡単にスライドする方法を紹介いたしました。
しかしデフォルトのままだとタップやスワイプしないと動きません。
そこで自動で動くスライドショーを作ってみようと思います。
前提
前回のソースを使うので、前回の記事見てない方は見てからだとスムーズだと思います。
スライドショーのデモ
一定間隔のスライドショー
一定速度のスライドショー
画像を表示させる
画像のスライドショーを作りたいので、まず画像に変えたいと思います。
画像に差し替える
1画面、2画面となっていた箇所にimgタグに置換して好きな画像を入れてください。
<div class="splide" aria-label="Splideの基本的なHTML">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://gadget-kazuki.com/wp-content/uploads/2023/07/eye-catching-nuro-mobile-saving-mode-1536x864.png">
</li>
<li class="splide__slide">
<img src="https://gadget-kazuki.com/wp-content/uploads/2023/06/image-4.png">
</li>
<li class="splide__slide">
<img src="https://gadget-kazuki.com/wp-content/uploads/2023/07/eye-catching-hamabeji-onion-1536x864.png">
</li>
</ul>
</div>
</div>
dy>ただこのままだと画像が枠内に収まりません。
枠内に画像が収まるようにする
CSSで枠内に収めます。widthとheightを100%にすると枠いっぱいに収まるようになります。
ただこれだと画像の比率が変わってしまい、無理やり画像が伸びてしまいます。
そこでobject-fitのcontainを使います。
アスペクト比を維持してくれるのでどの画像でも収まるようにしてくれます。
.splide__slide img{
width: 100%;
height: 100%;
object-fit: contain;
}一定間隔でスライドさせる
今回は5秒ごとに移動させたいと思います。
オプションがあるので、そこを変更するとスライド変更することができます。
自動再生
autoplayをtrueにすることで自動再生を有効になります。
自動再生の間隔はデフォルトだと5秒(5000ミリ秒)ですが、intervalに任意の数値を入れることで間隔を自由に変えることができます。
new Splide('.splide', {
autoplay: true,
interval: 5000,
}).mount()ループ
しかしこのままでは一番最後の要素に移動した際に止まってしまうので、typeをloopにします。
loopにすると一番最後に要素の次は最初の要素になるようになるので自動再生の途中で止まることがありません。
new Splide('.splide', {
type: 'loop',
autoplay: true,
interval: 5000,
}).mount()滑らかな自動スクロール
一定の速度でスライドできる方法があるのでご紹介します。
Auto Scrollエクステンションの設定
Auto Scrollエクステンションのファイルを新たに読み込ませてください。
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>そしてSplideを初期化する際、window.splide.Extensionsを渡してください。
new Splide('.splide').mount(window.splide.Extensions);これで滑らかな自動スクロールされます。特にオプションをいじらなくてもいい感じに動きますね。
途中で停止させない設定
デフォルトのままだといろいろ不便があったので調整していきます。
スライダーにマウスカーソルが乗ったとき、またはフォーカルされているときは停止されるようになっています。
また、最後の要素に達した際も止まってしまうのでオプション設定します。
new Splide('.splide', {
type: 'loop',
autoScroll: {
rewind: true,
pauseOnHover: false,
pauseOnFocus: false,
}
}).mount(window.splide.Extensions);autoScrollの中に設定していきます。
rewindをtrueにすることで、最後の要素に達したときに次は最初に戻してくれます。
ただこれだけだと最後の要素から最初の要素に移動する際に、右から左へ急に飛ぶような動きをするので、typeをloopにして永遠に右に移動できるようにしています。
pauseOnHoverはマウスカーソルが乗ったとき、pauseOnFocusはフォーカスされたときにスクロールを止めるかどうかを設定します。
デフォルトではtrueになっているので、これをfalseにします。
これで永遠に動くようになりました。
まとめ
画像のスライドショー簡単に作ってみました。
JavaScriptライブラリであるSplideを設定するだけで動かすことができ、オプションを設定することで細かい調整も可能です。
他にも設定できるものがあるので公式ドキュメントを見てみてください。
