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サイズ用になる





