禁用特定视口宽度的Owl Carousel [英] Disabling Owl Carousel at a specific viewport width

问题描述

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

I'm currently using Owl Carousel to show a gallery on desktop/laptop sized devices. However on smaller devices I'd like to disable the plugin and show each image stacked underneath one another.

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

Is this possible? I'm aware you can tweak Owl Carousel to show a certain number of images on screen at certain breakpoints. But I would like to be able to turn it off completely, removing all the divs etc.

这是我目前正在使用的笔：< a href =http://codepen.io/abbasinho/pen/razXdN =noreferrer> http://codepen.io/abbasinho/pen/razXdN

Here's a pen of what i'm currently working with at the moment: 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
});

感谢任何帮助！

推荐答案

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

I had to disable plugin if the screen width is bigger than 854px. Sure, you can change the code to fit your needs. Here is my solution:

1. 在调用插件之前检查视口宽度。


2. 如果宽度适合调用插件，请调用插件。否则添加'off'类以显示该插件已被调用并销毁。


3. 调整大小时：
   
   3.1。如果宽度适合调用插件并且插件尚未被调用或者之前已被销毁（我使用'off'类来了解它），那么调用插件。
   
   3.2。如果宽度不好调用插件并且插件现在处于活动状态，那么使用Owl的触发事件 destroy.owl.carousel 来销毁它。删除不必要的包装元素'owl-stage-outer'之后。

1. Check the viewport width before call the plugin.
2. If width is good to call the plugin, call the plugin. Else add the 'off' class to show as if the plugin has already been called and destroyed.
3. When resizing:
   3.1. If width is good to call the plugin AND the plugin hasn't been called yet or it was destroyed earlier (I use the 'off' class to know it), THEN call the plugin.
   3.2. if width isn't good to call the plugin AND the plugin is active now, THEN destroy it with Owl's trigger event destroy.owl.carousel and remove the unnecessary wrapper element 'owl-stage-outer' after it.

$(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元素：

And a bit of CSS to show disabled Owl element:

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

这篇关于禁用特定视口宽度的Owl Carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！