Responsive breakpoints in slides component

I know that Ionic has recently rewritten the slides components for the RC, and have ported over a few of the inputs like [slidesPerView] and [loop], but they have not ported the ability to setup responsive breakpoints for the sliders, i.e. the ability to update these inputs on the fly, which I am using for the browser version of our latest project.

The old swiper implementation was as follows:

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

Is anyone aware of a way to replicate this functionality in the newer Ionic slides component? I have looked at all the available options in the src and see no mention of breakpoints or responsiveness.

1 Like

hi @pjhartin,
Did you get any solution from breakpoint?
I need breakpoints because I want to develop an app with desktop support(web app).

find a solution buddy?

Hey buddy, now all the features are back in latest version. I was checking documentation and found it.

https://ionicframework.com/docs/api/components/slides/Slides/

I tried it and works great. Hope it helps you too.