Possible to factor height in to responsive breakpoint slidesToShow?

[kevadamson]

For e.g. my slider looks great 1024 x 768 (ipad landscape) showing 2, but 1024 x 1366 (ipad pro portrait) looks better showing 1, but of course the breakpoint is the same for each - 1024 - so I can't make a change. Any options for this?

[joshmoto]

I don't have an iPad pro to hand to test js navigator returned values.

When I test console.log(navigator.appVersion); in chromes console device toolbar it always returns...

5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1

...in both iPad and iPad Pro mode.

If you test js navigator returned values on actual devices you might get results which you can differentiate the devices to set as a variable, like device for example.

But in theory if you could set a variable to know what device you are on then you could do something like this...

let device = this_device();

let d = 1;

if(device === 'iPadPro') {

  d = 2;

}

let breakpoint = {
  sm: 576
};

$('#slick').slick({
  mobileFirst: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: breakpoint.sm,
      settings: {
        slidesToShow: 2 / d,
        slidesToScroll: 2
      }
    }
  ]
});

This is all theoretical if you can distinguish between iPad and iPad pro devices.

[kevadamson]

Thanks @joshmoto! I ended up getting a programmer friend of mine to write a solution. I'll post it here as well as it may also be a handy approach.