Currently implementing the Slick Slider on a WordPress website.
The slider is designed to display 3 columns at a screen size of 1024px and above. When the screen size drops below 1024px, the slider adjusts to show 2 columns, and on mobile devices, it switches to just 1 column.
This dynamic slider allows for flexibility in the number of columns populated - meaning there may be times when not all columns are filled with content. For example, the user might only upload assets for two slides instead of the expected three at the 1024px plus screen size.
The challenge I'm currently facing involves making the slider fluid. When users upload fewer slides than what the slider is set to display (e.g., 1 or 2 slides), these slides do not fill the entire screen. I've attempted using 'unslick' in my settings, but haven't found a suitable solution in the documentation as of yet.
Below is an excerpt from my code:
$(slider).slick({
autoplay: true,
autoplaySpeed: 800,
slidesToShow: 3,
slidesToScroll: 3,
speed: 800,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 980,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
prevArrow: false,
nextArrow: false
}
},
}