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"): kenwheeler.github.io/slick — Robin Zigmond
– Robin Zigmond, Commented Dec 21, 2018 at 8:58
thanks bro, its my mistake it didn't checked that responsive area of slick, let me try that too — Umair Mehmood
– Umair Mehmood, Commented Dec 21, 2018 at 9:03

Rory McCrossan · Accepted Answer · 2018-12-21 09:08:11Z

3

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

edited Dec 21, 2018 at 9:08

answered Dec 21, 2018 at 8:57

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

raphaelSeguin · Accepted Answer · 2018-12-21 09:03:18Z

0

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

answered Dec 21, 2018 at 9:03

raphaelSeguin

4341 gold badge3 silver badges13 bronze badges

1 Comment

yunzen Over a year ago

This won't work. myVar is only updated on resize. This does not have any effect on slick.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related