Слайкслайдер (нескользящий) отзывчивый

Question

В настоящее время используется Slick Slider на сайте WordPress.

У меня есть слайдер, который имеет максимум 3 столбца, на весь экран - 1024px плюс. На экране размером менее 1024 пикселей слайдер демонстрирует 2 столбца, а на мобильном устройстве - 1 столбец.

Я построил этот слайдер динамически - поэтому в их возможностях будут периоды, не все столбцы будут заполнены. то есть на экране "1024px плюс" пользователь может загружать ресурсы только для двух слайдов, внутри слайдера, а не для трех и т. д.

Проблема, с которой я сталкиваюсь, заключается в попытке сделать мой слайдер плавным, например, если пользователь загружает только 1 или 2 слайда - в пределах слайдера эти слайды не заполняют весь экран. Я попытался использовать "unlick" мои настройки для первого объекта. Если я не пропущен в документации, я не могу найти ничего подходящего

Вот фрагмент моего кода:

$(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
        }
    },
 }

Answer 1

В настоящее время нет возможности скользить или не скользить слайдер в зависимости от количества слайдов. Но вы можете обмануть его, выбрав количество слайдов и инициализируя слайдер в зависимости от этого количества.

// your Slick element
var slider = $('.your-selector');

// slides amount
// it will take the maximum number of slides or 1 in case the slider is empty
var slides = Math.max(1, slider.children('.your-slide-selector').length);

// slick initialization
// for each slidesToShow and slidesToScroll use Math.min so it will take the minimim amount between the slides amount and the defined slides for the breakpoint
$(slider).slick({
    autoplay: true,
    autoplaySpeed: 800,
    slidesToShow: Math.min(3, slides),
    slidesToScroll: Math.min(3, slides),
    speed: 800,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: Math.min(3, slides),
                slidesToScroll: Math.min(3, slides),
                infinite: true,
                dots: true
            }
        },
        {
            breakpoint: 980,
            settings: {
                slidesToShow: Math.min(2, slides),
                slidesToScroll: Math.min(2, slides),
                prevArrow: false,
                nextArrow: false
            }
        }
    ]
});

Я не проверял отзывчивость самого слайдера. Скрипт просто устанавливает slidesToShow а также slidesToScroll к определенному значению, или в случае, если количество слайдов меньше, чем определяет слайды, устанавливает значения на количество слайдов.

Надеюсь, поможет.