滑らかなカルーセルはサイズ変更されません

Question

私は開発中のWordpressサイトでSlick.jsカルーセルを使用しています。ブラウザウィンドウのサイズを変更すると、カルーセルがそのウィンドウに収まらず、水平スクロールバーが表示されます。私がSlickを起動しないと、流体のレイアウトで期待どおりに、画像のサイズが変わります。

Slickはいくつかのインラインスタイルを動的に注入し、そのうちの1つは幅です。回転台のすべての子divの幅を見ることができます： Slick inline styles

Slickの通常の動作は、ウィンドウのサイズを変更するとその幅を更新することですが、何らかの理由でこのサイトでは発生しません。ここで

は、ウェブサイトへのリンクです：

1. メイン＃スライダー-ホーム.containerの.sliderセッション
2. メイン：http://smart.trippple.com.br/

   ホームページは、これらの位置に配置された2つのカルーセルを、持っています#seguradoras .container＃seguradoras-carrousel .slider-session

これは私がスクリプトを開始する方法です。

$('#slider-home .slider-session').slick({ 
    autoplay: true, 
    autoplaySpeed: 5000, 
    arrows: false, 
    fade: true, 
    slidesToScroll: 1, 
    slidesToShow: 1, 
    speed: 1000 
    }); 

    $('#seguradoras-carrousel .slider-session').slick({ 
    autoplay: true, 
    autoplaySpeed: 2000, 
    arrows: false, 
    centerMode: true, 
    mobileFirst: true, 
    pauseOnHover: false, 
    slidesToShow: 4 
    }); 

そして、ここでは、私がこれまで試したすべてです：

• はjQueryと場所を取って矛盾がないことを確認するためにスリックを除くすべてのスクリプトを無効化されました。
• テスト済みのさまざまなバージョンのjQuery。
• jQuery Migrateを含む試してみました。
• jQuery + Slickをサイトのヘッダーに読み込もうとしました。
• コンテナからカルーセルを取り除こうとしました。
• スタイルシートのカルーセルdivに幅と最大幅を設定しようとしました。

  $（ウィンドウ）.resize（関数（）{。; $（ '＃スライダーホーム.sliderセッション'）滑らかな（ 'サイズを変更'）}：

• はスリックのresizeメソッドを使用しようとしました）;

• プラグインのGithubページでどこでも調べて問題を開くことさえできます。プラグインの作者は、スクリプトが確実にサイズ変更され、問題は私の環境にあると答え、彼は正しい。テストするために静的なHTMLページを作成しました。カルーセルは100％応答していました。このウェブサイトには、スクリプトの正常な動作を妨げるものがあります。

ところで、私はそれらをサイトのメインスタイルシートに埋め込んでいるため、Slickのスタイルシートはリンクされていません。

本当にありがとうございます！私はこれを2週間ほど解決しようとしています。それ以上は何を試みるべきか分かりません。どんなアイディアも大歓迎です。ありがとうございました！

Answer 1

あなたはスリックレスポンスオプションを試しましたか？私はこれがあなたが探している答えであるかどうかは分かりませんが、それはブラウザのサイズに基づいてスライダの作業をするために何をするかです。

$('#seguradoras-carrousel .slider-session').slick({ 
    autoplay: true, 
    autoplaySpeed: 2000, 
    arrows: false, 
    centerMode: true, 
    mobileFirst: true, 
    pauseOnHover: false, 
    slidesToShow: 4, 
    //start responsive option 
    responsive: [ 
    { 
     breakpoint: 600, //at 600px wide, only 2 slides will show 
     settings: { 
     slidesToShow: 2, 
     slidesToScroll: 2 
     } 
    }, 
    { 
     breakpoint: 480, //at 480px wide, only one slide will show 
     settings: { 
     slidesToShow: 1, 
     slidesToScroll: 1 
     } 
    } 
    ] 
}); 

Answer 2

たぶん、あなたは、サイズ変更ウィンドウでサイズを変更するために滑らかな強制あれば、これは合うだろう：私の場合は

$(window).resize(function() { 
    $('#slider-home .slider-session').slick('resize'); 
    $('#seguradoras-carrousel .slider-session').slick('resize'); 
}); 

Answer 3

を私は実際に

.slick-slide img {width: 100%;}