在特定视口宽度处禁用 Owl Carousel

Question

我目前正在使用 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
});

任何帮助都将一如既往地感激不尽！

Answer 1

如果屏幕宽度大于 854 像素，我必须禁用插件。当然，您可以更改代码以满足您的需求。这是我的解决方案：

1. 在调用插件之前检查视口宽度。
2. 如果宽度适合调用插件，则调用插件。否则添加“off”类以显示插件已被调用和销毁。
3. 调整大小时：
   3.1。如果宽度适合调用插件并且该插件尚未被调用或者它之前被销毁（我使用'off' 类知道它），那么调用插件。
   3.2.如果宽度不好调用插件并且插件现在处于活动状态，则使用 Owl 的触发事件 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;
}

Answer 2

更容易使用基于 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;
  }
}

Answer 3

function owlInitialize() {
   if ($(window).width() < 1024) {
      $('#carousel').owlCarousel();
   }else{
      $('#carousel').owlCarousel('destroy');
   }
}

$(document).ready(function(e) {
   owlInitialize();
});

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

工作小提琴： https://jsfiddle.net/j6qk4pq8/187/

Answer 4

mcmimik's 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();
        }
    }
});

Answer 5

简单，使用jquery。向轮播的容器 div 添加一个类，例如“<div id="carousel class='is_hidden'>”和一些 CSS，例如“.is_hidden{display:none;}”。然后使用 jquery 删除类，或者添加类，具体取决于窗口宽度。