Breakpoints are a set of width sizes that let you make the slider more responsive. For example you can set how layers get position at each breakpoint or change the slider height, or show or hide layers and any other elements inside the slider.
Breakpoints object
This object contains all defined breakpoints in the slider. Each breakpoint defines as a pair of breakpoint name and width size in pixels. You can change the object by breakpoints slider option. The object default value is like below
breakpoint = {
phone: 480,
tablet: 768
};
Important: You can set any breakpoint name except desktop since it is reserved inside the slider core.
Relocate or hide layers
You are able relocate or hide layers at a breakpoint. For more information check out Positioning layers article.
Height control
To change the slider height at each breakpoint you can set multiple height value in slider option. For more information check out Controlling slider height article.
Narrow layout
When the narrow layout get activated, the slider moves all UI controls that were aligned to the right or left to top or bottom of the slider. You can set when slider switches to narrow layout by slider option. For example narrowLayoutOn:'phone'. It switches to narrow at phone breakpoint.
Breakpoints class names
Master Slider automatically adds the active breakpoint class name to the slider main element when slider resizes. The class name pattern is ms-bp-[breakpoint name], for example ms-bp-phone. You can use this class names to add custom style to any element inside the slider at each breakpoint.
Sizing reference option
This option (sizingReference) lets you set how the slider finds the breakpoint, relative to the window size or the slider location in the page. Possible values are window and view.