在某些分辨率以下删除光滑滑块 /卡罗尔的麻烦

Question

我很难删除低于一定分辨率（768px）的屏幕的光滑颂歌。这是我正在使用的代码（我在堆栈溢出上找到了它）。问题是，添加此代码后，我的光滑颂歌根本不会显示。

 $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();
    });

我的原始代码确实可以显示颂歌，如下所示：

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

任何帮助都将不胜感激。

Answer 1

如果这对某人有帮助，我终于弄清楚了如何做到这一点。我使用的所有代码都在下面。注意：使用XML字符，因为我使用的是Blogger模板，该模板不允许'或＆gt; ＆lt;标志。

   
$(document).ready(function() {
    // This will fire when document is ready:
    $(window).on('resize', function(){
        // This will fire each time the window is resized:
        if($(window).width() >= 1024) {
            // if larger or equal
        $('#book-carosel').slick({
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: true,
        infinite:true
   
      }).show();

             } else if ($(window).width() >= 800) {
            // if smaller
            $('#book-carosel').slick({
                slidesToShow: 4,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,
               arrows: true,
               infinite:true
   
              }).show();
   
           } else if ($(window).width() >= 600) {
            // if smaller
            $('#book-carosel').slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,
               arrows: true,
               infinite:true
   
              }).show();
   
        } else if ($(window).width() >= 300) {
            // if smaller
            $('#book-carosel').slick({
                slidesToShow: 2,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,
               arrows: true,
               infinite:true
   
        
   
              }).show();
   
        } else {
  //  block of code to be executed if the condition1 is false and condition2 is false
            $('#book-carosel').unslick();
        }
    }).resize(); // This will simulate a resize to trigger the initial run.
});