Using slick slider in Post types

Currently using Slick Slider on a WordPress site.

I have a slider that features 3 slides max, on a full screen – 1024px plus. On a screen size under 1024px the slider showcases 2 columns and on mobile, the slider features 1 columns.

I have built this slider dynamic – therefore there will be possibilities, not all slides will be populated, it will be based on post related. This means there will be times the slider will only display 2 slides – or even 1 slide.

The issue I am having is trying to make my slider fluid, for example, if the user only uploads 1 or 2 slides – within the slider, these slides do not fill the full screen. I have tried using ‘unslick’ my setting for the first object. Unless I am missing from the documentation I can not find anything suitable

Here is a snippet of my code:

var slider = $(‘.single-item’);

$(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
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
],

Read more here:: Using slick slider in Post types

Leave a Reply

Your email address will not be published. Required fields are marked *