swiper breakpoints are not responsive

Created on 2 Aug 2016 · 5Comments · Source: nolimits4web/swiper

I have a swiper above 768px (ipad) slidesPerView: 'auto', and slidesPerGroup: 3,
but under 768 : horizSwiper.params.slidesPerView = 1;
horizSwiper.params.slidesPerGroup = 1;

i am using breakpoints it work well when i resize from big screen to small screen but when i get back to big screen everything goes wrong..... on refresh all is gd...
it is not responsive?!
an help?

my code:

var horizSwiper = new Swiper('#slider .screen', {
loop: true,
autoplay: 5000,
speed: 1200,
slidesPerView: 'auto',
slidesPerGroup: 3,
spaceBetween: 0,
keyboardControl: true,
breakpoints: {
767: {
slidesPerView: 1,
slidesPerGroup: 1
}
}

});

Source

AlainYahchouchi

👍1

Most helpful comment

Swiper don't recalculate slide's width after window resized from small viewport to large, if slidesPerView property change from numeric to 'auto'. JSFiddle

satodavan on 31 Oct 2016

👍6

All 5 comments

Would be good to see live example or JSFiddle with the issue to see it

nolimits4web on 15 Oct 2016

Swiper don't recalculate slide's width after window resized from small viewport to large, if slidesPerView property change from numeric to 'auto'. JSFiddle

satodavan on 31 Oct 2016

👍6

I'm having this issue, too. Any plans on fixing this?

sgoess on 13 Sep 2017

👍1

After resize (breackpoint 980) autoplay not work

{ pagination: '.swiper-pagination-about', autoplay: 12000, loop: true, speed: 3000, initialSlide: 0, slidesPerView: 3, slidesPerGroup: 3, touchRatio: 1, paginationClickable: true, centeredSlides: false, roundLengths: false, //значение true "ломает" слайдер (цикл) breakpoints: { 980: { autoplay: 6000, loop: true, speed: 2000, initialSlide: 0, slidesPerView: 2, slidesPerGroup: 1, paginationClickable: true, centeredSlides: true, observer: true, observeParents: true, roundLengths: false, } }, });