javascript - 如何在 $(window).resize 函数之外获取 window.width() 值？

Question

我正在寻找一种解决方案来获取 $(window).resize 函数之外的窗口宽度。我正在处理 slider 并希望更改其 slidesToShow 属性。

我希望$jq('.autoplay').slick函数中的宽度值改变slidesToShow的值。如果宽度小于 1000 slidesToShow 值必须是 2 等

我已经从this link获得了帮助但它对我不起作用。

var $jq = jQuery.noConflict();
$jq(document).on('ready', function() {
  $jq(window).resize(function() {
    var width = $jq(window).width();
  });

  $jq('.autoplay').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    prevArrow: '<div class="slick-prev"><i class="lni-chevron-left"></i></div>',
    nextArrow: '<div class="slick-next"><i class="lni-chevron-right"></i></div>'
  });
});

Answer 1

您可以更好地实现您的需求，而不必担心变量范围。您可以通过计算 resize 事件处理程序中的 slidesToShow 值，然后在该 block 中更新现有 Slick slider 实例的 slidesToShow 属性来执行此操作。像这样:

var $jq = jQuery.noConflict();

$jq(document).on('ready', function() {
  $jq(window).resize(function() {
    var width = $jq(window).width();
    var slidesToShow = /* calculate value based on width here... */ ;
    $slick.slick('slickSetOption', 'slidesToShow', slidesToShow);
  });

  var $slick = $jq('.autoplay').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    prevArrow: '<div class="slick-prev"><i class="lni-chevron-left"></i></div>',
    nextArrow: '<div class="slick-next"><i class="lni-chevron-right"></i></div>'
  });
});