スレーブスライダでは反応しないブレークポイントが機能しません

Question

ブラウザのサイズを変更せずに正常に動作する滑らかなスライダを実装しました。しかし、ブラウザのサイズを1024に変更すると、応答可能なブレークポイント設定は機能しません。

Jquery--

$('.slider').slick({ 
    centerMode: true, 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    dots: true, 
    infinite: true, 
    cssEase: 'linear', 
    variableWidth: true, 
    variableHeight: true, 
    mobileFirst: true, 
    responsive: [{ 
    breakpoint: 1024, 
    settings: { 
     slidesToShow: 4, 
     slidesToScroll: 1, 
     centerMode: false 
    } 
    }] 
}); 

デモ - https://jsfiddle.net/squidraj/hn7xsa4y/4/

すべてのヘルプは高く評価されています。

Answer 1

まず、あなたの例で古いバージョンのslickを使用します。このバージョンはmobileFirstプロパティをサポートしていません。 slidesToShowプロパティを使用する場合は、次にvariableWidthを削除する必要があります。 これは私があなたのjsテンプレートは以下で失敗している理由はわからないフィドルhttps://jsfiddle.net/Kosyanenko/2boaw2h3/1/

Answer 2

を働いている：

responsive: [{ 
    breakpoint: 1024, 

私は彼らの文書、コミュニティとのフォローアップ、またはバグを報告します。

いずれにしても、CSS3を使用する方が良い例はです。media queriesです。一つのアプローチ。 divをスライダにネストし、relativeの位置に配置し、それをスケールし、width: 100%;の子要素で、maxとminwidthを定義された解像度で宣言します。これは正しい方向にあなたを始めるはずです。 meta viewportも正しく使用してください。

Answer 3

これは私のトリックでした。

function resetSlick($slick_slider, settings) { 
      $(window).on('resize', function() { 
       if ($(window).width() < 320) { 
        if ($slick_slider.hasClass('slick-initialized')) { 
         $slick_slider.slick('unslick'); 
        } 
        return 
       } 

       if (!$slick_slider.hasClass('slick-initialized')) { 
        return $slick_slider.slick(settings); 
       } 
      }); 
     } 

slick_slider = $('.client-logos'); 
    settings = { 
     slidesToShow: 6, 
     slidesToScroll: 1, 
     autoplay: true, 
     autoplaySpeed: 2000, 
     prevArrow: '', 
     nextArrow: '', 
     pauseOnHover: true, 

     responsive: [ 
      { 
       breakpoint: 1024, 
       settings: { 
        slidesToShow: 5, 
        slidesToScroll: 1, 
       } 
      }, 
      { 
       breakpoint: 600, 
       settings: { 
        slidesToShow: 3, 
        slidesToScroll: 1 
       } 
      }, 
      { 
       breakpoint: 480, 
       settings: { 
        slidesToShow: 2, 
        slidesToScroll: 1 
       } 
      } 
      // You can unslick at a given breakpoint now by adding: 
      // settings: "unslick" 
      // instead of a settings object 
     ] 

    }; 
    slick_slider = $('.container'); 
    settings = { 
     slidesToShow: 6, 
     slidesToScroll: 1, 
     autoplay: true, 
     autoplaySpeed: 2000, 
     prevArrow: '', 
     nextArrow: '', 
     pauseOnHover: true, 

     responsive: [ 
      { 
       breakpoint: 1024, 
       settings: { 
        slidesToShow: 5, 
        slidesToScroll: 1, 
       } 
      }, 
      { 
       breakpoint: 600, 
       settings: { 
        slidesToShow: 3, 
        slidesToScroll: 1 
       } 
      }, 
      { 
       breakpoint: 480, 
       settings: { 
        slidesToShow: 2, 
        slidesToScroll: 1 
       } 
      } 
      // You can unslick at a given breakpoint now by adding: 
      // settings: "unslick" 
      // instead of a settings object 
     ] 

    }; 
    slick_slider.slick(settings); 
    resetSlick(slick_slider, settings); 

これをjsに追加し、図のようにスライダーを呼び出します。

あなたのCSSではslidedisplay: inline-block;です。すべての応答画面で動作します。