Настройка слайдов слайдера, чтобы показать - PullRequest
0 голосов
/ 06 ноября 2019

Я хочу создать скользкий слайдер. Если слайдер имеет только 1 слайд, покажите его как изображение полной ширины. Если у него 2 или более слайдов, показывайте слайды рядом. Пока приведенный ниже код покажет 2 слайда рядом друг с другом.

$('.two-slider').slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    draggable: false,
    infinite: true,
    // autoplay: true,
    // autoplaySpeed: 3000,
    responsive: [
    {
        breakpoint: 768,
        settings: {
            slidesToShow: 1,
        }
    }
    ]
});

if($('.two-slider:not(.slick-cloned)').length > 1){
    $('.two-slider').slick();
} else {
    $('.two-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        draggable: false,
        infinite: false,
        responsive: [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 1,
            }
        }
        ]
    });
}

Есть идеи?

Ответы [ 2 ]

0 голосов
/ 06 ноября 2019

Я закончил тем, что сделал это, если оператор, который проверяет длину, сколько есть отдельные слайды. :)

 if($('.two-slider:not(.slick-cloned) .single-slide').length > 1){
    $('.two-slider').slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        draggable: false,
        infinite: true,
        // autoplay: true,
        // autoplaySpeed: 3000,
        responsive: [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 1,
            }
        }
        ]
    });
} else {
    $('.two-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        draggable: false,
        infinite: false,
        responsive: [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 1,
            }
        }
        ]
    });
}
0 голосов
/ 06 ноября 2019

Вы можете попробовать это:

$(document).ready(function() {
  $(".carousel")
    .slick({
      slidesToShow: $(this).find("img").length > 1 ? 2 : 1,
      slidesToScroll: $(this).find("img").length > 1 ? 2 : 1
    });
});
...