Swiper.jsでスマホ時の表示を変えたい

Question

swiper.jsを使って、3枚画像を表示させるオートプレイスライダーを作りました。
http://idangero.us/swiper/

スマホ時は3枚画像表示ではなく、1枚画像にしたいのですが、そういった事は可能でしょうか。

現在はこの様に設定しています。

var mySwiper = new Swiper('.swiper-container', {
spaceBetween: 10,
slidesPerView: 3,
loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: true
  },
});

Answer 1

Breakpoints参照。

【Swiper API】
http://idangero.us/swiper/api/

Breakpoints

Comments

[MOMONUTS]

ありがとうございます！
こちらのページは見落としておりました...
ページを参考にbreakpointを追加したら、PCも一枚表示になり、ループが効かなくなりました....
書き方がおかしいのでしょうか...
<code>
var mySwiper = new Swiper('.swiper-container', {
spaceBetween: 20,
slidesPerView: 3,
breakpoints:{
480: {
slidesPerView: 1,
spaceBetween: 10
}
}
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: true
}
});
</code>

[kei344]

ループはわかりませんが、「PCも一枚表示に」は「480以上の場合に1枚」のみ指定されているのでその通りになっているだけかと。

[kei344]

あ、ループはもしや。
}, // ← カンマが抜けています
loop: true,

[MOMONUTS]

教えていただいた事を参考に

var mySwiper = new Swiper('.swiper-container', {
spaceBetween: 20,
slidesPerView: 3,
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: true
},
breakpoints: {
640: {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: true
},
}
}
});

この様な形にする事で実現出来ました！
ありがとうございました！