Отключить слайдер при определенной ширине экрана

Вопрос-ответ JavaScript
1

Добрый день, форумчане!
Нужна помощь. Есть слайдер, который должен “отключаться” при ширине экрана меньше 320px. Есть такой код:

var sld = function() {
if ($(window).width() > 320) {
$(‘.slider’).bxSlider({
auto: true,
pause: 2000,
autoHover: true
});
} else {
$(‘.slider’).destroySlider();
}
};
sld();
$(window).resize(sld);

Когда уменьшаешь размеры экрана до 320px и меньше он автоматически не включается, но после обновления страницы (во время того как ширина экрана <=320px) он отключается и все происходит как и должно быть.
Как сделать так чтобы я принудительно не обновлял страницу при указанном разрешении.
Подскажите, может ошибка где-то в коде?
П.С. На основе “bxslider” у меня на странице реализованы еще несколько слайдеров и каруселей и “такая же беда” с ними в том числе.

2

так что должен делать слайдер, при размере окна меньше 320px?
судя по коду…наверное включатся.
Я не силен в jquery…так как давно от него отказались у себя в проектах и точно хз…как останавливать слайдер. Но что могу сказать…вся часть кода, которая отвечает за вызов функции и реакцию на размер экрана - работает, проблема в слайдере, возможно тому причина что .destroySlider() его именно убивает…а потом что-то мешает инициироватся с нуля, заново…какая-то внутреняя защита “от дурака”, мол кому такое может понадобится…Можешь пример на jsfiddle закинуть?

3

Как вариант, можешь хайдить сам блок со слайдером, и шоуить при нужном тебе размере

4

Еще раз. Слайдер работает при ширине экрана большей 320px. Когда ширина экрана становится <=320px слайдер должен “отключится”. Исходя из документации bxslider - функция .destroySlider() его отключает. Но еще раз повторюсь, у меня не получается так, чтобы это работало в автоматическом режиме - т.е. уменьшил ширину браузера - слайдер “отключился”, увеличил - заработал. Каждый раз при манипуляции с шириной окна, чтобы добиться нужно эффекта нужно обновить браузер и тогда все работает. А в режиме авто - не работает.

5 
var slider = $('.slider');
var sld = function() {
  if ($(window).width() > 320) {

    slider.bxSlider({
      auto: true,
      pause: 2000,
      autoHover: true
    });
  } else {
    slider.destroySlider();
  }
};
sld();
$(window).resize(sld);

Вынеси переменную со слайдером за функцию.
http://jsfiddle.net/17hxn0nt/1/

6

Спасибо за помощь. уже легче. но тоже не досконально. но тут выплыл другой “вопрос”, у меня три слайдера bxslider на странице и у каждого своя логика, по вышеуказанному принципу сделал первый слайдер - вроде пока ок, а второй и третий не хотят работать, хоть убей:
1.
var slider = $(’.slider’);
var sld = function() {
if ($(window).width() > 320) {
slider.bxSlider({
auto: true,
pause: 2000,
autoHover: true
});
} else {
slider.destroySlider();
}
};
sld();
$(window).resize(sld);

var slider2 = $(’.release_carusel’);
var relCarus = function() {
if($(window).width() <= 320) {
slider2.bxSlider({
slideWidth: 100,
moveSlides: 1
});
} else {
slider2.destroySlider();
}
};
relCarus();
$(window).resize(relCarus);

var slider3 = $(’.service_carusel’);
var servCarus = function() {
if($(window).width() <= 320) {
slider3.bxSlider({
slideWidth: 100,
moveSlides: 1
});
} else {
slider3.destroySlider();
}
};
servCarus();
$(window).resize(servCarus);