Как динамично подключать/выключать слайдер owl-carousel без изменения структуры блока-слайдера?

Question

[Drodge]

Здравствуйте, мне нужно сделать динамический слайдер, который будет включаться когда ширина экрана будет меньше там 500 px, и выключался, когда ширина экрана больше этих же 500 px. И что-бы при этом структура слока-слайдера не ломалась. Можно ли это реализовать с помощью owl-carousel? Если нет, что может помочь в таком случае? (надеюсь правильно объяснил)

P.S. Я думал просто дублировать блок, один сделать слайдером, а второй обычным и так чередовать их через display, но сайт то идти на themforest будет, и дубликация информации будет считаться за костыль.

Comments

[Dima Polos]

В slick есть точно такая возможность, с owl не работал толком

[Ankhena]

Вы всегда можете написать if при инициализации слайдера.

[Drodge]

Ankhena, да, только проблема в том, что если делать эти действия в браузере(сжимать и разжимать его ширину), в исходное положение вернуть всё не получится, по крайне мере я не знаю как это сделать, ведь там при инициализации слайдера добавляются в DOM его элементы.

[Сергей delphinpro]

Drodge, нужно всего лишь чуть-чуть подумать. Совсем немножко.
Вот вы начали вроде и остановились на полпути:

ведь там при инициализации слайдера добавляются в DOM его элементы

Продолжайте мысль: значит нам нужно убрать эти элементы и вернуть разметку в исходное состояние. Вернуть в исходное состояние, значит произвести действие обратное инициализации. Что-то типа destroy. Осталось полистать документацию к плагину (owl, slick или любой другой) и уточнить название подобного метода и способ его вызова.

Далее нам нужно как-то отслеживать ширину вьюпорта, чтобы переключать слайдер. Очевидное решение на поверхности — слушать onresize на window. Более продвинутое — matchMedia.

ВСЁ!!! Проблема решена!

[Mikola-BLR]

Если ещё актуально, делал так:

var $window = $(window);
var $myCarousel = $('.my-carousel');

$window.on('resize', function() {
  var timeout = null;

  clearTimeout(timeout);
  timeout = setTimeout(function () {
    if (window.matchMedia('(min-width: 1024px)').matches) {
      if (!$myCarousel.hasClass('owl-carousel')) {
        $myCarousel.addClass('owl-carousel');
        $myCarousel.owlCarousel({
          loop: true,
          nav: true,
          rewind: true,
          dots: false,
          onInitialized: function(){
            $myCarousel.show();
          }
        });
      }
    } else {
      $myCarousel.trigger('destroy.owl.carousel');
      $myCarousel.removeClass('owl-carousel');
      $myCarousel.show();
    }
  }, 1000);
}).trigger('resize');

Элемент с классом 'my-carousel' имеет display: none, а уже после инициализации слайдера отображается $myCarousel.show();

Чуть подробнее здесь:
https://codepen.io/pen/WaoKPx (что-то вставка codepen не фурычит)