web-dev-qa-db-ja.com

ウィンドウのサイズを変更するときにスリックスライダーが反応しない

WordPressスリックスライダーを使用して画像スライダーを作成しました。中央モードを使用しています。1つの画像を中央に配置し、両側に1つずつわずかに表示したいのですが、いくつか問題があります。まず、ウィンドウのサイズを変更するスリックスライダーは、スライダーを操作するまで新しい画像の幅を計算しません。これは、デモには問題がないことです。次に、両側の画像が期待どおりに表示されません。

https://codepen.io/Reece_Dev/pen/xLQwEb

$('.carousel').slick({
  centerMode: true,
  centerPadding: '0px',
  slidesToShow: 1,
});

#container{
  width: 100%;
}

.slick-slide img{
    width: 80%;
    height: auto;
    max-width: 2000px;
}

<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div class="carousel">
    <div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_one2200.png"></div>
    <div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_two2200.png"></div>
    <div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_one2200.png"></div>
  </div>
</div>
javascriptjqueryhtmlcsswordpress
4
Reece

codepen ウィンドウサイズ変更イベントを探してこれを追加

$(window).resize(function(){
  $('.my-slider')[0].slick.refresh();
});
4
Renzo Calla

ウィンドウのサイズ変更でslickメソッドを実行して、画像のサイズを再計算します。

$(window).on('resize orientationchange', function() {
  $('.carousel').slick('resize');
});
1
Josh

ブラウザウィンドウの高さが変わるたびに、たるんだカルーセルのサイズを変更するために使用するコードは次のとおりです。

    var MARGIN_TOP_BOTTOM = 15;

    $(window).on('init resize', function () {
        var newWindowHeight = $(this).height();
        newWindowHeight -= (MARGIN_TOP_BOTTOM * 2);

        $(".cssCarousel").css("margin", MARGIN_TOP_BOTTOM + "px 0px");
        $(".slick-slide").css("height", newWindowHeight + "px");
        $(".slick-slide img").css("height", newWindowHeight + "px");
    });

ご覧のとおり、上部と下部に小さな（15px）ギャップを残しています。

0
Mike Gledhill

必要なのは、いくつかのcssスタイルと、最新のjQueryをwordpressに追加することだけでした。同じ問題が発生した場合は、私のコーデックをチェックしてCSSを確認してください

0
Reece