Как отключить OWL слайдер на определенных размерах?

Question

[Александр Иванов]

Раньше делал сейчас не могу найти данную опцию

owlProjects.owlCarousel({
    loop: true,
 	center: false,
 	nav: false,
 	navContainerClass: 'owl-navigation',
 	margin:0,
 	dots: false,
    slideBy:1,
    startPosition: 0,
 	responsive:{
     	0:{
     	    stagePadding: 50,
 	        margin: 10,
 			items:1
     	},
     	600:{
     	    rewind: false,
 	        callbacks: false
     	},
 	}
});

Хотя вспомнил, это на первом OWL было эти ребята что до сих пор этот момент не пропатчили?

Comments

[HelpSophie]

"отключить OWL слайдер на определенных размерах" = "включить на нужных"
Вызывайте скрипт только на тех размерах, где он нужен и дело с концом.

[Александр Иванов]

На OWL 2 этой функции нет, если есть то приведи пример, я его в офф док не нашёл.
на slick слайдере есть на owl нет

responsive:{
   				0:{
              margin:50,
              center: true,
   						items:1
// здесь должно быть отключить, но его нет
   				},
   				415:{
   						items:2
   				},  
   				520:{
   						items:3
   				},            
   				768:{
   						items:5
   				},
   				1024:{
   						items:6
   				}
   		}

Answer 1

[Yaroslav Rostanets]

Отключить в смысле что б были картинки просто?

$(window).resize(function(){
if($(window).width() > 768){
    owlProjects.trigger('destroy.owl.carousel');
}
});

Comments

[Александр Иванов]

Это можно конечно но это не красиво и это кастыль. На OWL 2 этой функции нет

[Yaroslav Rostanets]

я показал примерный ход мыслей. Это не костыль.
Нужно создать событие которое будет выстреливать каждый раз когда ширина окна становиться меньше 768 или хотя бы так сделать.

/*--Определение двайса--*/
    var state = {
        _device: "",
        _mobInit: function(){
            mobInit();
        },
        _descInit: function() {
            descInit();
        },
    };

    (function( $ ) {
        $.fn.getDevice = function(braikPoint) {
            Object.defineProperty(state, "device", {

                get: function() {
                    return this._device;
                },

                set: function(value) {
                    this._device = value;
                    if(value == "desctop"){
                        state._descInit();

                    } else if (value == "mobile"){
                        state._mobInit();
                    }
                }
            });

            $(this).on("resize load", function(){
                if($(this).width() < braikPoint && state.device != "mobile"){
                    state.device = "mobile";
                } else if ($(this).width() > braikPoint && state.device != "desctop") {
                    state.device = "desctop";
                }
            });
        };
    })(jQuery);

    $(window).getDevice(768);


    function mobInit(){
        //Инициализация плагинов для телефона
    }

    function descInit() {
//Для десктопа
    }

[Александр Иванов]

В своём варианте я примерно так и сделал.
Но опять же это по прежнему кастыль

Answer 2

[scorpion11133]

$(window).on('load resize', function () {
    if ($(this).width() > 768) {
      $(".slider").trigger('destroy.owl.carousel');
    } else {
      $(".slider").owlCarousel({
        items: 2,
      });
    }
  })