SlickJS, unslick() remove issue

Question

Good Afternoon,

I'm currently working and using SlickJS Carousel, I'm trying to remove several items when the window width is larger than 375 using the unslick(); snippet.

I can see the resize function working as when the window size is less than 375 the slick(); carousel display without any issues.

If anyone can see whats going wrong please let me know.

Thank you.

JS

$(document).ready(function () {
    // Header Slider 
    $('.touchslider_one').slick({
        autoplay: true,
        infinite: true,
        speed: 1500,
        autoplaySpeed: 3000,
        dots: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        cssEase: 'linear',
    });
    onresize();
    $(window).resize(function () {
        onresize();
    });
});
function onresize(){
    checkWidth();
}
function checkWidth() {
    if ($(window).width() < 376 ) {
        // Boxes
        $('.touchslider_fourth').slick({
            autoplay: false,
            infinite: true,
            speed: 1500,
            adaptiveHeight: true,
            dots: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            cssEase: 'linear'
        });
        // Featured Products
        $('.touchslider_three').slick({
            autoplay: false,
            infinite: true,
            speed: 1500,
            adaptiveHeight: true,
            dots: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            cssEase: 'linear'
        });
        // Logos 
        $('.touchslider_two').unslick();
        $('.touchslider_two').slick({
            autoplay: true,
            infinite: true,
            speed: 1500,
            autoplaySpeed: 6000,
            dots: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            cssEase: 'linear'
        });
    } else {
        // Test
        console.log('Larger than 375');             

        // Remove
        $('.touchslider_fourth').unslick();
        $('.touchslider_three').unslick();
        $('.touchslider_two').unslick();
        // Rebuild
        $('.touchslider_two').slick({
            autoplay: true,
            infinite: true,
            speed: 1500,
            autoplaySpeed: 6000,
            dots: false,
            slidesToShow: 5,
            slidesToScroll: 5,
            cssEase: 'linear'
        });
    }
}

Answer 1

Try this:

$('.your-slider').slick('unslick');