Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

swiper breakpoints are not responsive

See original GitHub issue

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 } }

});

Issue Analytics

State:
Created 7 years ago
Reactions:1
Comments:5 (2 by maintainers)

Top GitHub Comments

6reactions

satodavancommented, Oct 31, 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

1reaction

sgoesscommented, Sep 13, 2017

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

Top Results From Across the Web

idangero Swiper responsize break points not working

Hi I'm using iDangero Swiper on a website I'm doing and for some reason I cant get the responsive break points to work....

swiper breakpoints are not responsive - MSDN

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

How to Set Responsive Breakpoints in Swiper React

I've been asked on YouTube how to use breakpoints in the new react version of Swiper, so here it is. Hope this was...

Swiper - Responsive breakpoints - CodeSandbox

CodeSandbox is an online editor tailored for web applications.

Swiper Demo 37 Responsive Breakpoints - StackBlitz

<!DOCTYPE html> · <html lang="en"> · <head> · <meta charset="utf-8"> · <title>Swiper demo</title> · <meta name="viewport" · content="width=device-width, · initial- ...