How to add slick slider for the desired screen resolution? Slider initialization:

$('.slider').slick({ accessibility: true, autoplay: true, });

I add the required class at the specified resolution to initialize the slider:

  function replaceClass(){ var block = document.querySelector(".block"); if (window.matchMedia('(max-width: 500px)').matches) { block.classList.add('slider'); } else { block.classList.remove('slider'); } }; replaceClass(); $(window).resize(replaceClass);

But then, if you increase the width> 500 px, the class 'slider' is removed from the block, but the slider still remains to hang on the block ((Thank you !!

  • To remove the class and block contents are different things. - KAGG Design
  • The content of the block is connected to the block with the specified class. If the slider does not find a block with the specified class for itself, should it disappear or show undefined? I thought so) By analogy with css = add a class, change the state / appearance - Marina
  • When it is connected, yes, it searches for a block with a class and inserts html there. But if you remove the class, html will not go anywhere) - KAGG Design
  • Those. The approach for adding a slider on the desired extension by adding a class is incorrect ( - Marina
  • He is correct. Only when changing the resolution, you need to either destroy all html in the slider block, or call destroy if it has such a function - KAGG Design

0