Отключение Карусели совы при определенной ширине окна просмотра

В настоящее время я использую Owl Carousel для показа галереи на устройствах для настольных компьютеров и ноутбуков. Однако на более мелких устройствах я хотел бы отключить плагин и показать каждое изображение, сложенное под ним.

Возможно ли это? Я знаю, что вы можете настроить Owl Carousel, чтобы показать определенное количество изображений на экране в определенных точках останова. Но я хотел бы полностью отключить его, удалив все div и т.д.

Вот ручка того, с чем я сейчас работаю: http://codepen.io/abbasinho/pen/razXdN

HTML:

<div id="carousel">
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg);">
  </div>
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl2.jpg);">
  </div>
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg);">
  </div>
</div>

CSS

#carousel {
  width: 100%;
  height: 500px;
}

.carousel-item {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

JQuery

$("#carousel").owlCarousel({
      navigation : true,
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem: true
});

Любая помощь с благодарностью принимается как всегда!

Ответы

Ответ 1

Мне пришлось отключить плагин, если ширина экрана больше 854px. Конечно, вы можете изменить код в соответствии с вашими потребностями. Вот мое решение:

Проверить ширину окна просмотра перед вызовом плагина.
Если ширина хороша для вызова плагина, вызовите плагин. Else добавьте класс 'off', чтобы показать, как будто плагин уже вызван и уничтожен.
При изменении размера:
3.1. Если ширина хороша для вызова плагина И плагин еще не был вызван или он был уничтожен раньше (я использую класс 'off', чтобы его узнать), THEN вызовите плагин.
3.2. если ширина не подходит для вызова плагина И теперь активен плагин, THEN уничтожит его с событием триггера сова destroy.owl.carousel и удалит ненужный элемент-оболочку 'owl-stage-outer' после него.

$(function() {
    var owl = $('.owl-carousel'),
        owlOptions = {
            loop: false,
            margin: 10,
            responsive: {
                0: {
                    items: 2
                }
            }
        };

    if ( $(window).width() < 854 ) {
        var owlActive = owl.owlCarousel(owlOptions);
    } else {
        owl.addClass('off');
    }

    $(window).resize(function() {
        if ( $(window).width() < 854 ) {
            if ( $('.owl-carousel').hasClass('off') ) {
                var owlActive = owl.owlCarousel(owlOptions);
                owl.removeClass('off');
            }
        } else {
            if ( !$('.owl-carousel').hasClass('off') ) {
                owl.addClass('off').trigger('destroy.owl.carousel');
                owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
            }
        }
    });
});

И немного CSS, чтобы показать отключенный элемент Owl:

.owl-carousel.off {
    display: block;
}

Ответ 2

mcmimik answer является правильным, но мне пришлось сделать одно изменение, чтобы он работал у меня.

В функции:

    $(window).resize(function () {
    if ($(window).width() < 641) {
        if ($('.owl-carousel').hasClass('off')) {
            var owlActive = owl.owlCarousel(owlOptions);
            owl.removeClass('off');
        }
    } else {
        if (!$('.owl-carousel').hasClass('off')) {
             owl.addClass('off').trigger('destroy.owl.carousel');
            owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
        }
    }
});

Смените owl.addClass('off').trigger('destroy.owl.carousel'); на owl.addClass('off').data("owlCarousel").destroy();:

    $(window).resize(function () {
    if ($(window).width() < 641) {
        if ($('.owl-carousel').hasClass('off')) {
            var owlActive = owl.owlCarousel(owlOptions);
            owl.removeClass('off');
        }
    } else {
        if (!$('.owl-carousel').hasClass('off')) {
            owl.addClass('off').data("owlCarousel").destroy();
            owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
        }
    }
});

Ответ 3

Легче использовать решение на основе CSS

@media screen and (max-width: 992px) {
  .owl-item.cloned{
    display: none !important;
  }
  .owl-stage{
    transform:none !important;
    transition: none !important;
    width: auto !important;
  }
  .owl-item{
    width: auto !important;
  }
}

Ответ 4

Простой, используйте jquery. Добавьте класс в div div карусели, например "<div id="carousel class='is_hidden'>" с некоторым css, например ".is_hidden{display:none;}". Затем используйте jquery для удаления класса или добавления класса в зависимости от ширины окна.