0

I am using iDangerous slider and I want to make it responsive. I am using the plugins' breakingpoints.

What I want to achieve: On mobile screens only 1 image should be visible, on tablets 2, and on desktop 8.

I did it like this:

slidesPerColumn: 8,
        breakpoints: {
        700: {
          slidesPerColumn: 1
        },
        1020: {
          slidesPerColumn: 2
        }
      }

Now, it does work but only when I refresh the page. It only seems to catch one breaking point. When I go from mobile to tablet, it works. But when I go from mobile to desktop, it doesn't. Same happens the other way around. Desktop to tablet works, but desktop to mobile doesnt work.

From desktop to mobile, it would show two images instead of 1, and from mobile to desktop it shows 4 images instead of 8.

Anyone knows what could be wrong?

Thanks

Bart. K
  • 63
  • 8
  • A similar problem was solved and may have the solution for this, as well: https://stackoverflow.com/a/56535456/6794421 –  Jun 11 '19 at 01:59

2 Answers2

0

As per the Swiper API documentation, I don't think the plugin breakpoints will work for slidesPerColumn: "Not all parameters can be changed in breakpoints, only those which are not required different layout and logic, like slidesPerView, slidesPerGroup, spaceBetween. Such parameters like slidesPerColumn, loop, direction, effect won't work."

http://idangero.us/swiper/api/#.WI6aSbYrK9Y

Best of luck!

0

Your problem is that iDangerous starts with Mobile sizes and only gets bigger..

So you have to do it like this: 

slidesPerColumn: 1,
        breakpoints: {
        700: {
          slidesPerColumn: 2
        },
        1020: {
          slidesPerColumn: 1
        }
      }

ihad the same problem and this fixed it for me:)

slideBruv
  • 80
  • 13