I'm using the this script:
var swiper = new Swiper('.swiper', {
slidesPerView: 3,
spaceBetween: 50,
});
I would like the slidesPerView: 3 to change to slidesPerView: 2 when the screen width gets smaller then 1000px, and to slidesPerView: 1 when screen width gets smaller then 500px.
As I know nothing of javascript syntax, please help me out by writing the full code.
Thanks you for your help.
EDIT:
Thank you all for your replies.
I still can't get it to work though...
Bellow is the complete script.
What am I doing wrong???
var swiper2 = new Swiper('.swiper2', {
slidesPerView: 3,
spaceBetween: 50,
freeMode: true,
loop: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
breakpoints: {
// when window width is <= 499px
499: {
slidesPerView: 1,
spaceBetweenSlides: 30
},
// when window width is <= 999px
999: {
slidesPerView: 2,
spaceBetweenSlides: 40
}
}
});