Tiny-slider: Breakpoints should use window viewport rather than slider viewport

[gaetan-puleo]

__Issue description__:

Hello
Controls options are not working with responsive key.
Did i missed something?

Sorry for my bad English

__Demo link/slider setting__:
(I can't link my work sorry)

case : 1 (controls must be disabled after 760px but controls are always enabled)

tns({
    container: '.satisfied-customers__carousel-reviews',
    autoplay: false,
    item:1,
    gutter:10,
    arrowKeys:true,
    controls: false,
    controlsText:[
      "<svg><use xlink:href='#icon-arrow-left'></use></svg>",
      "<svg><use xlink:href='#icon-arrow-right'></use></svg>",
    ],
    responsive: {

      760 : {
        controls : false
      }
    },

case : 2 (controls must be disabled after 760px but controls are always enabled)

tns({{
    container: '.satisfied-customers__carousel-reviews',
    autoplay: false,
    item:1,
    gutter:10,
    arrowKeys:true,
    controls: false,
    controlsText:[
      "<svg><use xlink:href='#icon-arrow-left'></use></svg>",
      "<svg><use xlink:href='#icon-arrow-right'></use></svg>",
    ],
    responsive: {

      0 : {
        controls : true,
      },
      760 : {
        controls : false
      }
    },
})

case : 3 (controls must be enabled after 760px but controls are always disabled)

tns({{
    container: '.satisfied-customers__carousel-reviews',
    autoplay: false,
    item:1,
    gutter:10,
    arrowKeys:true,
    controls: false,
    controlsText:[
      "<svg><use xlink:href='#icon-arrow-left'></use></svg>",
      "<svg><use xlink:href='#icon-arrow-right'></use></svg>",
    ],
    responsive: {
      760 : {
        controls : true
      }
    },
})

_Tiny-slider version_: 2.2.5
_Browser name && version_: chrome 62 and Firefox 56
_OS name && version_: Ubuntu 16.04

[ganlanyuan]

Hey @gaetan-puleo ,
I made some demos based on your options, they worked as expected for me.
https://s.codepen.io/ganlanyuan/debug/WXxYLZ/xJAjOWzezNVk
Could you check them on your OS?

[gaetan-puleo]

Hi @ganlanyuan I tried on my pc and it's working great but i think I know the problem.
You check the slider's width and not the window's width.
My sliders are in small containers and when my window is bigger than 760px controls is not working but If my sliders' width are more than 760px controls is working.

[gaetan-puleo]

https://s.codepen.io/ganlanyuan/debug/WXxYLZ/xJAjOWzezNVk
In your exemple for the case 2 if you load the window with a width more than 760px and you resize one time under 760px and you resize again more than 760px the buttons are always visible. (it's not a big bug)

[ganlanyuan]

Right, the breakpoints are based on slider's view port rather than window's.
I should add this in the document.

[ganlanyuan]

Fixed in v2.3.2.

[ganlanyuan]

Breakpoint issue is fixed, now it's based on window width from v2.3.3.
Please let me know if this works for you.

[gaetan-puleo]

It's working Great!! Good job @ganlanyuan

[ganlanyuan]

Thanks for letting me know.

[notrealdev]

HI @ganlanyuan , how i can change option on small screen?
I have option like this

var carousel = tns({
    ...
    axis: 'vertical',
    responsive: {
        768: {
                axis: 'horizontal'
            }
        }
});

But on small and large device only show vertical mode

[ganlanyuan]

axis is not available in the responsive options.
You need to manually set it to horizontal mode on mobile.