调整窗口大小时，光滑的滑块没有响应

Posted 2023-02-22

【中文标题】调整窗口大小时，光滑的滑块没有响应

【英文标题】：Slick slider not being responsive when resizing the window

【发布时间】：2018-02-06 22:35:26

【问题描述】：

我使用 slick slider 在 WordPress 中创建了一个图像滑块。我正在使用中心模式，我希望一张图像居中，每侧稍微显示一张。但我有一些问题。首先，当我调整窗口滑动滑块的大小时，直到我与滑块交互时才计算新的图像宽度，这是演示中不存在的问题。其次，每一面的图像都没有像他们应该的那样显示。

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>

【参考方案1】：

codepen寻找窗口调整大小事件并添加此

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

【讨论】：

这成功了！我在调整最小高度时遇到了问题，真的很奇怪。其他答案无效。

【参考方案2】：

巧妙的创作者肯·惠勒本人的回答：

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

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

【参考方案3】：

在调整窗口大小时运行slick 方法以重新计算图像尺寸。

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

【参考方案4】：

原来我只需要一些 css 样式并将最新的 jQuery 添加到 wordpress。如果您有同样的问题，请检查我的 codepen 以查看 css

【参考方案5】：

当浏览器窗口改变高度时，这是我用来调整松弛轮播大小的代码。

    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)。