当記事ではSplide.jsを使用して、自動で流れ続ける無限ループスライダーを作成する方法について記します。
通常のSplide.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Splide.jsを初めて使う方はこちらから先に参照いただければと思います。
Splide.jsでシンプルなスライダーを作成する
目次
①矢印とページネーションのないスライダーを作成する
自動で流れ続けるスライダーなので矢印とページネーションを非表示にしておきます。
また、ループを有効にしておきましょう。
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/css/splide.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/js/splide.min.js"></script>
<style>
.sample-slider {
width: 70%;
margin: 0 auto;
}
.sample-slider img {
width: 100%;
}
</style>
<div class="splide sample-slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="./img/sample1.png"></li>
<li class="splide__slide"><img src="./img/sample2.png"></li>
<li class="splide__slide"><img src="./img/sample3.png"></li>
</ul>
</div>
</div>
<script>
new Splide('.sample-slider', {
type : 'loop',
arrows: false,
pagination: false,
}).mount()
</script>
矢印とドットのないスライダーができました。
②Auto Scrollエクステンションを読み込む
滑らかにスライダーを自動再生させたい場合、Splide.jsではautoplayオプションではなくAuto Scrollエクステンションというものを使います。
追加でライブラリを読み込む必要がありますが、下記のようにCDNで簡単に読み込むことができます。
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>
上記では2024年3月時点で最新版を使用しております。
Auto Scrollエクステンションの最新バージョンは常に下記サイトでご確認いただけます。
@splidejs/splide-extension-auto-scroll CDN by jsDelivr – A CDN for npm and GitHub
③自動スクロールを有効にする
下記のようにmountメソッドにwindow.splide.Extensionsを渡すことで自動スクロールが有効になります。
new Splide('.sample-slider', {
type : 'loop',
arrows: false,
pagination: false,
}).mount(window.splide.Extensions) // 変更
自動スクロールが有効になりました。
ゆっくり滑らかにスライドが自動再生されるはずです。
④自動スクロールのスピードを調整
autoScrollオプションの中で自動スクロールのスピードを指定する事ができます。
デフォルトはspeed: 1 なので、下記のようにより大きい数値を設定すると速くなります。
new Splide('.sample-slider', {
type : 'loop',
arrows: false,
pagination: false,
autoScroll: { // 追加
speed: 2, // 追加
}, // 追加
}).mount(window.splide.Extensions)
自動スクロールのスピードが速くなりました。
⑤ホバー時に自動スクロールを一時停止しないように
デフォルトではカーソルをスライドの上に載せると自動スクロールが一時停止します。
これを無効化したい場合は、autoScrollオプションの中にpauseOnHover: falseを追加します。
※autoScrollオプションの中に記述しないと効かないので注意が必要です。
new Splide('.sample-slider', {
type : 'loop',
arrows: false,
pagination: false,
autoScroll: {
speed: 2,
pauseOnHover: false, // 追加
},
}).mount(window.splide.Extensions)
ホバーしても自動スクロールが停止しなくなったと思います。
⑥スライドの表示枚数を設定する
自動で流れ続けるスライダーってスライドが複数枚表示されているデザインのものが多いですよね。
表示枚数を変更したい場合はperPageオプションを使用します。
new Splide('.sample-slider', {
type : 'loop',
arrows: false,
pagination: false,
perPage: 3, // 追加
autoScroll: {
speed: 2,
pauseOnHover: false,
},
}).mount(window.splide.Extensions)⑦自動スクロールの方向を逆向きにする
デフォルトでは右から左にスライドが流れ行きますが逆向きにしたい場合もあると思います。
自動スクロールを逆向きにするにはdirection: “rtl”を追加します。
new Splide('.sample-slider', {
type : 'loop',
arrows: false,
pagination: false,
perPage: 3,
direction: "rtl", // 追加
autoScroll: {
speed: 2,
pauseOnHover: false,
},
}).mount(window.splide.Extensions)
自動スクロールが逆向きになりました。
ソースコード全文
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/css/splide.min.css" rel="stylesheet">
<style>
.sample-slider {
width: 70%;
margin: 0 auto;
}
.sample-slider img {
width: 100%;
}
</style>
<div class="splide sample-slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="./img/sample1.png"></li>
<li class="splide__slide"><img src="./img/sample2.png"></li>
<li class="splide__slide"><img src="./img/sample3.png"></li>
<li class="splide__slide"><img src="./img/sample4.png"></li>
</ul>
</div>
</div>
<script>
new Splide('.sample-slider', {
arrows: false, // 矢印を非表示にする
pagination: false, // ページネーションを非表示にする
type : 'loop', // ループさせる
perPage: 3, // スライドの表示枚数
direction: "rtl", // 自動スクロールの方向を逆向きに
autoScroll: {
speed: 2, // 自動スクロールのスピード
pauseOnHover: false,// ホバー時に自動スクロールを停止しないように
},
}).mount(window.splide.Extensions)
</script>以上、Splide.jsを使用して自動で流れ続ける無限ループスライダーを作成する方法でした。
