Как уничтожить bxslider по определённому размеру?

Question

[Kamel515]

Здравствуйте!

Есть такая нужда в том, что бы при изменении экрана до 670px bxslider отключался. На официальном сайте написано что необходимо применить destroySlider

example:
slider = $('.bxslider').bxSlider();
slider.destroySlider();,

однако же к своей безграмотности я не знаю куда и как это все применить. Подскажите пожалуйста.

$(document).ready(function(){
  			$('.bxslider').bxSlider({
  				pager: false
  			});
		});

Answer 1

[alex]

codepen.io/alechq/pen/pexvoo

<ul class="bxslider">
  <li><img src="https://unsplash.it/200/300" /></li>
  <li><img src="https://unsplash.it/600/300" /></li>
  <li><img src="https://unsplash.it/300/300" /></li>
  <li><img src="https://unsplash.it/400/300" /></li>
</ul>

$(document).ready(function(){
  const slider = $('.bxslider').bxSlider({
    pager: false
  });
  
  if ($(window).width() <= 670) {
    slider.destroySlider()
  }

  $(window).resize(function() {
    if ($(window).width() <= 670) {
      slider.destroySlider()
    }
    
    if ($(window).width() > 670) {
      slider.reloadSlider()
    }
  });
});

Comments

[Kamel515]

К сожалению ничего не происходит, и в консоли никаких ошибок

[alex]

Kamel515: поправил ответ

[Kamel515]

Класс! Огромное спасибо!