Breakpoints
Override any slider option at specific viewport widths using the breakpoints option.
Usage
new Slider('#el', {
slidesPerPage: 1,
gutter: 0,
breakpoints: {
640: {
slidesPerPage: 2,
gutter: 16,
},
1024: {
slidesPerPage: 3,
gutter: 24,
},
},
})How it works
Breakpoints are min-width based. The slider applies the largest matching breakpoint on top of the base options. When the viewport resizes, options are re-merged and applyLayout() is called automatically.
Overrideable options
Most layout and behavior options can be overridden per breakpoint. The following cannot (they are set once at construction):
plugins— plugin list is fixedon— event handlers are fixed
Example: hide arrows on mobile
new Slider('#el', {
slidesPerPage: 1,
plugins: [arrows()],
breakpoints: {
768: { slidesPerPage: 2 },
},
})To hide arrows on mobile use CSS targeting the container width rather than JS breakpoints:
@media (max-width: 767px) {
.c--slider-a__arrow { display: none; }
}