idangero Swiper responsize break points not working

Question

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. below is the js I'm using.

var swiper = new Swiper('.s1', {
 slidesPerView: 5,
 slidesPerColumn: 2,
 spaceBetween: 30,
 nextButton: '.swiper-button-next',
 prevButton: '.swiper-button-prev',
 breakpoints: {
  1024: {
   slidesPerView: 5,
   spaceBetween: 30
  },
  768: {
   slidesPerView: 1,
   spaceBetween: 10
  },
  640: {
   slidesPerView: 1,
   spaceBetween: 10
 },
 320: {
  slidesPerView: 1,
  spaceBetween: 10
 }
},
});

Any ideas where I'm going wrong

Ethno

Facing same issue. Can't find any solution even after exploring documentation. – Bornu

these breakpoints worked fine check link – Saki

these breakpoints work fine check this thread – Saki

Answer 1

Currently the docs have things confusingly backwards, which is why I think many people are having issues (especially those working with sass media statements and/or ionic for example).

The issue is the crocodile symbols. They're the wrong way around. They should read '// when window width is <=320px'. Hence the method is to work backwards from the default options (eg slidesPerView, spaceBetween etc).

For example:

{
  ...
  slidesPerView: 5,
  spaceBetween: 10,
  breakpoints: {
    ...
    960: {
      slidesPerView: 4,
      spaceBetween: 8
    },
    720: {
      slidesPerView: 3,
      spaceBetween: 6
    },
    540: {
      slidesPerView: 2,
      spaceBetween: 4
    },
    320: {
      slidesPerView: 1,
      spaceBetween: 2
    },
    ...
  }
}

So we start with a default slidesPerView of 5 and spaceBetween of 10px, which is suitable for your average laptop/desktop. For screen sizes less than or equal to (<=) 960px, we set slidesPerView to 4 and spaceBetween to 8px. Then for screen sizes less than or equal to 720px, we set slidesPerView to 3 and spaceBetween to 8px. And so on.

Because things are mistakenly backwards, we work backwards, which ironically turns out to be more intuitive.

Benedix

That's true. Experienced the same issue and your comment helped me make things work. In the documentation the media queries should say window width is <= 640px in order to work. I will try to reach out to @nolimits4web who is the creator of Swiper. – Orpha

In Swiper 5.3.0 it works just like in documentation – Eternalize

got the same error, create a PR to Swiper doc repo to fix github.com/nolimits4web/swiper-website/pull/54 – Hydrogenize

Worked for me. Thank you! – Myxomatosis

You are the savior! – Italic

Answer 2

I had the same problem and removing the following lines solved the problem for me:

slidesPerView: 5,
slidesPerColumn: 2,
spaceBetween: 30,

It turns out they override the breakpoints values.

Irrespirable

Answer 3

In addition to all answered - check this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

as is. Once this solved the issue for me. (I used to have this: <meta name="viewport" content="width=device-width, initial-scale=1.0"> and Siwper's breakpoints didn't work. Update to the code above had solved the problem.)

Petronel

Breakpoints did almost work for me without specifying minimum- and maximum-scale, yet the breakpoints were slightly off (e.g. 769px happened at 756px). Can't understand why, but using this meta tag did solve that issue. – Gerund

Answer 4

in my case none of the solutions worked but the following worked...

  // Swiper
  const swiper = new Swiper(".swiper", {
    // slidesPerView: 6
    centeredSlides: true,
    grabCursor: true,
    breakpoints: {
      320: {
        slidesPerView: 2,
        spaceBetween: 50,
      },
      375: {
        slidesPerView: 2,
        spaceBetween: 0,
      },
      1024: {
        slidesPerView: 6,
        spaceBetween: 0,
      },
    },
  });

Larger than 1024 screens was taking 2 slides from 320 breakpoint, i removed my default slidesPerView from 1st config level to put it in breakpoints.

Ellmyer

Answer 5

Late to the party, but years later I'm having a similar issue with the breakpoints. What worked for me was to repeat the 'slidesPerView' declaration in each breakpoint. For some reason if i left that property out of a breakpoint object, the 'slidesPerView' property would revert back to the first declaration, which was always '1' slide. Hope this helps someone.

Romeyn

Answer 6

In Swiper 5.3.0 it works just like in documentation.

You might need to update your configuration if you are upgrading from 4.x like I did.

var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

Eternalize

Answer 7

Had the same issue.

Removing slidesPerView in the general swiper configuration worked for me.

Heavyhearted

Thank you for confirming, but this could have been done in a comment on the correct answer :) – Obtuse

Oh you are right 😅 mb – Heavyhearted

Answer 8

The issue is this is set with min-media queries, which is not immediate in the documentation.

Here's a working example:

new Swiper(.swiper, {
    slidesPerView: 1,
    breakpoints: {
       1000: {
         slidesPerView: 2,
       },
       1400: {
         slidesPerView: 3,
       },
     },
})

So in this example on smaller screens we would have one slide per screen, on 1000px it will be two and then 3 from 1400px onwards.

Matey

Answer 9

in my case, the problem was the declaration was inside ready() method

$(document).ready(function() {

});

I moved it outside, I hope this help some have the same problem

Roid

Answer 10

I had the same problem and removing the last comma before the closure parenthesis.

breakpoints: {
 530: {
  slidesPerView: 1,
  spaceBetween: 5
},

Charterhouse

Answer 11

may be trying removing the ',' after the last parenthesis.

...    
320: {
      slidesPerView: 1,
      spaceBetween: 10
     }
    }
    });

Unreconstructed