😎

【JS】splideでランダム表示

2024/05/31に公開

JavaScript

tech

splideとは？

https://ja.splidejs.com/
アクセシビリティに配慮した軽量・高機能スライダー！
日本人が開発しているので公式ドキュメントが日本語で読みやすいです。
いろんなオプションもあって便利！

splideでランダム表示させてみた

　Udemyでjs勉強中に講師の人が、Math.floor(Math.random()）の解説の時に、時々スライダーをランダム表示させたいというリクエストがあって、Math.floor(Math.random()）は使ったりしますよーと言っていました。
splideってランダム表示のオプションあるのかな？
と調べたところ、そういうオプションがなかったので、早速勉強したMath.floor(Math.random()）を使って実装してみました。

document.addEventListener('DOMContentLoaded', function(){
 const splideList = document.querySelector('.splide__list');
 const splideSlide = document.querySelectorAll('.splide__slide');
 // 配列に変換する
 const splideSlides = Array.from(splideSlide);

 // 画像をランダムに並べ替える
 for (let i = splideSlides.length - 1; i > 0; i--) {
   const j = Math.floor(Math.random() * (i + 1));
   [splideSlides[i], splideSlides[j]] = [splideSlides[j], splideSlides[i]];
 }

 // 並べ替えたスライドをリストに追加
 splideSlides.forEach(slide => {
   splideList.appendChild(slide)}
 );

 // Splideを初期化
 new Splide('#image-slider', {
     type: 'loop',
     perPage: 1,
     autoplay: true,
 }).mount();
});

Array.from()を使う理由

const splideSlide = document.querySelectorAll('.splide__slide');
ここで取得されるHTMLCollectionは、配列に似ていますが配列ではないため、配列メソッドを直接使うことはできません。そこで、Array.from()を使って、HTMLCollectionを標準的なJavaScriptの配列に変換して配列メソッドを使っています！

画像をランダムに並べ替える方法

for (let i = splideSlides.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[splideSlides[i], splideSlides[j]] = [splideSlides[j], splideSlides[i]];
}
並べ替えの方法を解説します。
例えば、splideSlidesが[1, 2, 3, 4, 5]という要素を持つ配列だったとします。

1回目のループ（i = 4）です。（要素が5個ですが、配列は0から始まるため！）
jはMath.floor(Math.random()をつかって0から4の間のランダムな整数を出します（j = 2だったとします）。
[splideSlides[i], splideSlides[j]] = [splideSlides[j], splideSlides[i]];
上記のコードで、splideSlides[4]（5）とsplideSlides[2]（3）が入れ替えられます。
その結果、配列は[1, 2, 5, 4, 3]になります。

2回目ののループは（i = 3）です。

jは0から3の間のランダムな整数です（j = 1だったとします）。
splideSlides[3]（4）とsplideSlides[1]（2）が入れ替えられます。
配列は[1, 4, 5, 2, 3]になります。
これをi=0まで繰り返すと、配列全体がランダムに並べ替えられます！

並べ替えた要素を追加！

並べ替えたスライドをリストに追加することで、ランダムな表示が可能になります！
splideSlides.forEach(slide => {
splideList.appendChild(slide)}
);

まとめ

splideにはランダム表示のオプションはない
スライドを配列に入れてシャッフルすることでランダム表示させることができる！