How to get window.width() value outside of $(window).resize function?

Question

I am looking for a solution to get the width of window outside the $(window).resize function. I am working on a slider and want to make changes to its slidesToShow property.

I want the width value in the $jq('.autoplay').slick function to change the value of slidesToShow. If the width is less than 1000 slidesToShow value must be 2 etc.

I have taken help from this link but it's not working for me.

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>'
  });
});

If I understand correctly what you're trying to do, you can just use the `responsive` property in the options object you pass to `.slick`. See here (scroll down to "responsive display"): http://kenwheeler.github.io/slick/ — Robin Zigmond, Dec 21 '18 at 08:58
thanks bro, its my mistake it didn't checked that responsive area of slick, let me try that too — Umair Mehmood, Dec 21 '18 at 09:03

Rory McCrossan · Accepted Answer · 2018-12-21T09:08:11.113

You can achieve what you need in a better way without having to worry about variable scope. You can do this by calculating the slidesToShow value within the resize event handler and then update the existing Slick slider instance's slidesToShow property within that block. Something like this:

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>'
  });
});

score 0 · Answer 2 · answered Dec 21 '18 at 09:03

You can declare your variable on the upper function so it's accessible in all the inner functions, like this :

    var $jq = jQuery.noConflict();
    $jq(document).on('ready', function() {
        // if you declare a variable here;
        var myVar = 0;
        $jq( window ).resize(function() { 
            var width = $jq( window ).width();
            // then initialize it here;
            myVar = $jq( window ).width();
        });
        $jq('.autoplay').slick({
            slidesToShow: myVar > 30 ? 'yes': 'no', // you can use it here, since it is in the scope
            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>'
        });
    });

This won't work. myVar is only updated on resize. This does not have any effect on slick. — yunzen, Dec 21 '18 at 09:05

How to get window.width() value outside of $(window).resize function?

2 Answers2