1

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?

2 Answers 2

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/

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

Comments

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.