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

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

0 голосов
/ 12 июня 2018

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

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

Я построил этот слайдер динамически - поэтому их возможности, будут периоды, не все столбцы будут заполнены.т. е. на экране «1024px plus» пользователь может загружать ресурсы только для двух слайдов внутри слайдера, а не для трех и т. д.пользователь загружает только 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
        }
    },
 }

1 Ответ

0 голосов
/ 12 июня 2018

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

// 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 на определенное значение или, если количество слайдов меньше, чем определяет слайды, устанавливает значения на количество слайдов.

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

...