Changing jquery values on window resize

Question

I have this code:

$(".slick-slider-view").slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
    });

I need the value of 'slidesToShow to change to 2 when the window width is less than 1000px:

    $(".slick-slider-view").slick({
        dots: true,
        infinite: true,
        slidesToShow: 2,
        slidesToScroll: 1
    });

How can I use @media like feature with jquery?

François Huppé · Accepted Answer · 2019-07-20 13:10:30Z

2

Check this example from the slick plugin doc:

$(".slider").slick({

  // normal options...
  infinite: false,

  // the magic
  responsive: [{

      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        infinite: true
      }

    }, {

      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true
      }

    }, {

      breakpoint: 300,
      settings: "unslick" // destroys slick

    }]
});

The plugin has a responsive feature just for that.

Ref: https://github.com/kenwheeler/slick/

answered Jul 20, 2019 at 13:10

François Huppé

2,1061 gold badge9 silver badges15 bronze badges

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

Comments

Hitmands · Accepted Answer · 2019-07-20 13:09:17Z

0

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

const media = window.matchMedia('(max-width: 600px)');

media.addListener((mql) => {
  console.log(window.innerWidth);
});

answered Jul 20, 2019 at 13:09

Hitmands

14.2k4 gold badges41 silver badges78 bronze badges

Collectives™ on Stack Overflow

Changing jquery values on window resize

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related