禁用特定视口宽度的猫头鹰轮播

我目前正在使用Owl Carousel在桌面/笔记本电脑大小的设备上展示一个画廊。 但是在较小的设备上，我想禁用插件并将每个图像堆叠在一起。

这可能吗？ 我知道你可以调整猫头鹰旋转木马在某些断点处在屏幕上显示一定数量的图像。 但我希望能够完全关闭它，删除所有的div等。

这是我目前正在使用的笔： http ： //codepen.io/abbasinho/pen/razXdN

HTML：

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

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

1. 在调用插件之前检查视口宽度 。
2. 如果宽度适合调用插件，请调用插件。 否则添加’off’类以显示该插件已被调用和销毁。
3. resize时：
   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

mcmimik的答案是正确的，但我必须做一个改变才能为我工作。

在function中：

  $(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 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; } } 

Answer 4

简单，使用jquery。 将一个类添加到轮播的容器div中，例如“

 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/