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

我正在寻找一种解决方案，以获取$(window).resize函数之外的窗口宽度。我正在使用滑块，并且想要对其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>'
  });
});

最佳答案

您可以更好地实现所需的功能，而不必担心变量范围的问题。您可以通过计算slidesToShow事件处理程序中的resize值，然后更新该块中现有Slick滑块实例的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>'
  });
});

关于javascript - 如何在$(window).resize函数之外获取window.width()值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53881705/