Splide

1つのページで複数のSplideを動かす方法

複数のスライダー

Splideのインスタンスは、一つにつき一つのスライダーしか作れません。

セレクタにクラス名を指定してコンストラクタに渡したとしても、Splideは最初にマッチした要素にしかスライダーを適用しません。

複数のスライダーを作成する場合は、それぞれに対してインスタンスを作成してください。

script
                  
                    //それぞれのスライダーに対してインスタンスを作成

                    new Splide( '#slider1' ).mount();
                    new Splide( '#slider2' ).mount();
                    new Splide( '#slider3' ).mount();

まとめて初期化したい場合は、たとえば以下のようにforなどを利用します

script
                  
                    var elms = document.getElementsByClassName( 'splide' );

                    for ( var i = 0; i < elms.length; i++ ) {
                      new Splide( elms[ i ] ).mount();
                    }
効率よく記述して動かしたい

該当の1つ目しかSplideが発火しないので、2つ目以降も発火するようにしたい
そのために個別にclassを付けも良いですが、バグりにくいのは個別にIDをつけてあげる方が良い。。。。

例えば、１つのオプションで３つのスライドを制御したい

効率よく記述して動かすために「foreach」を使います！！

「foreach」とはリストや配列などのコレクションに含まれる要素を一つずつ順番に処理するための、プログラミングにおけるループ構文です

script
                  
                    const splides = document.querySelectorAll('.splide')
                    splides.forEach(slide => {
                    new Splide(slide, {
                      type: 'loop',
                      perPage: 3,
                      perMove: 1,
                      gap: 10,
                    }).mount();
                    })