Hi @mfgmicha,
the easiest way to accomplish this is to use slick’s slickSetOption
method.
Add the following lines to your JS (or enqueue a separate file which uses slick-slider-core
as $deps
):
jQuery( document ).ready( function() {
jQuery( '.slick-slider-wrapper .slick-slider' ).slick( 'setOption', 'responsive', [
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 4,
}
},
],
true
)
} )
Adjust the selector, breakpoints and settings to your specific needs.
Thanks for the fast reply, had found the same solution myself.
The important part is the slick-slider-core
as $deps
in the enqueue / register of the script, so that you run after the initial .slick()
Glad you have resolved it.
Hi,
I still cant understand this statement
The important part is the slick-slider-core
as $deps
in the enqueue
I registered the new js file, i.e. slick-responsive.js as the file name, and pasted those lines into it. Those action’s result was beyond my expectation because the slider was not working, so I excluded responsive ability for a while until I get the proper solution.
Could you please advise me to solve this problem?
I found this kind of error in Developer Console.
Screenshot
Hi @mrfoo,
please start a new support thread since this one has been marked as resolved
and I don’t want to spam @mfgmicha’s inbox.
Thanks.