Splide

レスポンシブ対応

script
                  
  new Splide('.splide', {
    type: 'loop',
    perPage: 3,
    perMove: 1,
    gap: 10,

    breakpoints: {
      768: {
        perPage: 2,
        gap: 30
      },
      640: {
        perPage: 1
      }
    },
  }).mount();
                  
                
オプション
                  
    breakpoints: {
      768: {
        perPage: 2,
        gap: 30
      },
      640: {
        perPage: 1
      }
    },
    で指定する

    「768px」「640px」以下にのサイズを指定している
                  
                

スマホ(SP)ファースト

script
                  
  new Splide('.splide.splide-min', {
    type: 'loop',
    perPage: 1,
    perMove: 1,
    gap: 10,

    breakpoints: {
      768: {
        perPage: 2,
        gap: 30
      },
    },
    mediaQuery: 'min' //メディアクエリ
  }).mount();
                  
                
オプション
                  
mediaQuery: 'min'
・ブレークポイントの検出に用いられるメディアクエリに対して、min-width、max-widthのどちらを使うかを指定します。

初期値(通常)は'max'で「max-width」です

「mediaQuery: 'min'」
を指定するこで、「min-width」になります


この
    breakpoints: {
      768: {
        perPage: 2,
        gap: 30
      },
    },
の箇所が「768」以上になり、PCサイズ用になる