Как включить JS на JQuery при ширине меньше 991px и отключить при больше 991 px без перезагрузки страницы сайта?

Question

[Cal_Lightman]

Делаю адаптивный сайт. Подключена библиотека Jquery. При ширине экрана >991px - сайдбар справа. При ширине <=991px - сайдбар уходит вниз, под контент.

Идея в том, чтобы при мобильных разрешениях <=991px блоки не выстраивались друг под другом, удлиняя прокрутку, а была возможность пошаговой горизонтальной прокрутки. Нашел для этого библиотеку. Но есть проблема.

При загрузке разрешения скажем 1000px - скрипты не работают, а при сужении экрана до 991px и ниже - работают. Всё как задумано. Но если начать увеличивать снова больше 991px - то JS скрипты не отключаются и верстка ломается.

Как правильно реализовать задуманное? Помогите пожалуйста. В JS не силен.

function resizeScrenn(){
    if ($(window).width() <= 991){


//библиотека для пошаговой прокрутки
(function(e,i){if(typeof....
(function(t,e){if(t......
(function(e,i){if(typ.....
(function(e,i){if(t....

$('.main-carousel').flickity({
    initialIndex:0,
    cellAlign:'center',
    friction:0.4,
    resize:true,
    contain:false,
    freeScroll:false,
    wrapAround:false,
    prevNextButtons:false,
    pageDots:true,
    percentPosition:true,
    watchCSS:false,
});


} else{


}   
}
resizeScrenn();
$(window).resize(function(){
    resizeScrenn();
});

Comments

[YavaDev]

Читайте внимательней документацию https://flickity.metafizzy.co/api.html#destroy
Добавтье в else $('.main-carousel').flickity('destroy');

[Cal_Lightman]

YavaDev, Проблема решена!
Спасибо, друг!

Хочу добавить, что саму библиотеку нужно вынести из скрипта.
Вот так:

//библиотека для пошаговой прокрутки
(function(e,i){if(typeof....
(function(t,e){if(t......
(function(e,i){if(typ.....
(function(e,i){if(t....

function resizeScrenn(){
    if ($(window).width() <= 991){


// flickity-settings
$('.main-carousel').flickity({
    initialIndex:0,
    cellAlign:'center',
    friction:0.4,
    resize:true,
    contain:false,
    freeScroll:false,
    wrapAround:false,
    prevNextButtons:false,
    pageDots:true,
    percentPosition:true,
    watchCSS:false,
});


} else{

// flickity-settings destroy
$('.main-carousel').flickity('destroy');

}   
}
resizeScrenn();
$(window).resize(function(){
    resizeScrenn();
});

[Cal_Lightman]

YavaDev, Скажите пожалуйста, Если делаю без JQuery....
вставляю библиотеку Flickity,
Но как-будто не отрабатывает else.
В чем может быть причина?

function resizeScreen(){
if (window.innerWidth <= 991){
  console.log(window.innerWidth);

  var elem = document.querySelector('.main-carousel');
  var flkty = new Flickity( elem, {
    initialIndex:0,
    cellAlign:'center',
    friction:0.4,
    resize:true,
    contain:false,
    freeScroll:false,
    wrapAround:false,
    prevNextButtons:false,
    pageDots:true,
    percentPosition:true,
    watchCSS:false,
  });

}
else {
  console.log();

flkty.destroy();

}
}
resizeScreen();
window.addEventListener('resize', resizeScreen);

[YavaDev]

Cal_Lightman, надо объявить переменную var flkty = ... вне функции.
Ну, а вообще я бы еще немного условия изменил. У меня получилось как-то так:

var flkty = false;
function resizeScreen(){
  if (window.innerWidth <= 991 && !flkty){
    console.log(window.innerWidth);

    var elem = document.querySelector('.main-carousel');
    flkty = new Flickity( elem, {
      initialIndex:0,
      cellAlign:'center',
      friction:0.4,
      resize:true,
      contain:false,
      freeScroll:false,
      wrapAround:false,
      prevNextButtons:false,
      pageDots:true,
      percentPosition:true,
      watchCSS:false,
    });

  } else if(window.innerWidth > 991 && flkty) {
    flkty.destroy();
    flkty = false;
  }
}

[Cal_Lightman]

YavaDev,
Попробовал - не срабатывает. Теперь на <=991px не работает Flickity.

[YavaDev]

Cal_Lightman, у меня работает - https://codepen.io/YavaDev/pen/gOwVRwz

[Cal_Lightman]

YavaDev,

Cделал даже вот так, для двух блоков под разные разрешения.

var flkty1 = false;
var flkty2 = false;

function resizeScreen(){

	if (window.innerWidth <= 991 && !flkty1){
		console.log('INIT once time');
		flkty1 = new Flickity('.main-carousel-1', {
			initialIndex:0,
			cellAlign:'center',
			friction:0.4,
			resize:true,
			contain:false,
			freeScroll:false,
			wrapAround:false,
			prevNextButtons:false,
			pageDots:true,
			percentPosition:true,
			watchCSS:false,
		});
	} else if(window.innerWidth > 991 && flkty1) {
		console.log('DESTROY once time');
		flkty1.destroy();
		flkty1 = false;
	}


	if (window.innerWidth <= 575 && !flkty2){
		console.log('INIT once time');
		flkty2 = new Flickity('.main-carousel-2', {
			initialIndex:0,
			cellAlign:'center',
			friction:0.4,
			resize:true,
			contain:false,
			freeScroll:false,
			wrapAround:false,
			prevNextButtons:false,
			pageDots:true,
			percentPosition:true,
			watchCSS:false,
		});

	} else if(window.innerWidth > 575 && flkty2) {
		console.log('DESTROY once time');
		flkty2.destroy();
		flkty2 = false;
	}

}
resizeScreen();
window.addEventListener('resize', resizeScreen);

Долго втыкал, как прописать свои настройки....
Уф....тяжело это всё.

[Cal_Lightman]

YavaDev, Делаете ли вы формы обратной связи ? И сколько это будет стоить?

[YavaDev]

Cal_Lightman, у меня сейчас полная загрузка и совершенно нет времени. Так что извините.