How to make the function work on resize in slick slider?

Question

JavaScript

Hello. There is such a problem. When the page loads, the custom select works. But if the page is made less than 1380, the select stops working (ie, in my case, if the slick rebuilds the slides). What can be done to avoid this?

Link to example

Answer 1

https://codepen.io/anon/pen/pQZrKL?editors=1010

Answer 2

See how the slick actually works. He does a bunch of duplicate slides. And he doesn’t know exactly what you did and declared for the internal elements of the slides. You have two options, stop using the slick and use another alternative that doesn't rebuild the dom, or reinitialize your custom components every time you slick the slick. To do this, go to the documentation slick events -> afterChange.

Answer 3

$(window).on('resize orientationchange', function() {
  $('.Ваш_элемент').slick('resize');
});

Fully

<div class="your-class">
  <div><img src="https://placehold.it/350x150" class="img-responsive"></div>
  <div><img src="https://placehold.it/350x150" class="img-responsive"></div>
  <div><img src="https://placehold.it/350x150" class="img-responsive"></div>
</div>

$('.your-class').slick({
    responsive: [
      {
        breakpoint: 641,
        settings: "unslick"
      }
    ],
    mobileFirst: true
});

$(window).on('resize orientationchange', function() {
  $('.your-class').slick('resize');
});