창 크기를 조정할 때 슬릭 슬라이더가 반응하지 않음

창 크기를 조정할 때 슬릭 슬라이더가 반응하지 않음

슬릭 슬라이더를 사용하여 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>

codepen 창 크기 조정 이벤트를 찾고 추가

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

슬릭 크리에이터인 Ken Wheeler가 직접 답변합니다.

$('.slider-class').slick('setPosition');

https://stackoverflow.com/a/32107099/3396866

를 실행합니다.slick이미지 치수를 재계산하기 위한 창 크기 조정 방법.

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

필요한 것은 몇 가지 css 스타일과 최신 jQuery를 워드프레스에 추가하는 것 뿐이었습니다.같은 문제가 있으면 내 코드펜을 체크하여 css를 확인합니다.

다음은 브라우저 창의 높이가 변경될 때마다 느슨한 회전목마 크기를 조정하는 데 사용하는 코드입니다.

    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)의 틈이 있습니다.

언급URL : https://stackoverflow.com/questions/45939631/slick-slider-not-being-responsive-when-resizing-the-window