Setting slick slider slides to show

Question

I want to create a slick slider. If slider has only 1 slide, show it as a full width image. If it has 2 or more slides, show slides side by side. So far the below code will show 2 slides side by side easy.

$('.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,
            }
        }
        ]
    });
}

Any ideas?

Answer 1

I ended up doing this if statement which checks for the length of how many single slides there are. :)

 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,
            }
        }
        ]
    });
}

Answer 2

You can try this:

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