I'm having trouble removing my slick carosel for screens below a certain resolution (768px). Here is the code I'm using (I found it here on Stack overflow). The trouble is, my slick carosel won't display at all after adding this code.

 $slickGreen = false;
    function greenSlider(){    
        if($(window).width() > 768){
            if(!$slickGreen){
                $('#book-carosel').slick({
            slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: true,
        infinite:true
       }).show();
   
                });
                $slickGreen = true;
            }
        } else if($(window).width() < 767){
            if($slickGreen){
                $('#book-carosel').slick('unslick');
                $slickGreen = false;
            }
        }
    };
 });

$(document).ready(function(){
        ....
        greenSlider();
    });
    $(window).on('resize', function(){
         ....
         greenSlider();
    });

My original code that does work to display the carosel is as follows:

  $(document).ready(function(){
      $('#book-carosel').slick({
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: true,
        infinite:true
   
      }).show();
    });

Any help would be much appreciated.