Swiperで、
大画面の時は3つの画像を表示
小画面の時は１つのみ表示
なんて画像の幅によって画像の枚数や幅を変えることができます。
そのやり方を書いていきます。
JSファイルに次のコードを追加します。
var mySwiper = new Swiper('.swiper-container', {
// スライドの間隔ー単位はpx
spaceBetween: 0,
// 表示されるスライドの枚数
slidesPerView: 1,
breakpoints: {
540: {
slidesPerView: 3,
spaceBetween: 20
},
1025: {
slidesPerView: 3,
spaceBetween: 80
}
},breakpoints: {
より下の部分をjsファイルに追加することで、
このコードの実行結果
幅が539pxまで・・・・・・・画像１枚 幅は０
幅が540pxから1024px・・・画像3枚 幅は20px
幅が1025px以上・・・・・・画像3枚 幅は80px
