Javascript 在特定视口宽度禁用 Owl Carousel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28251644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabling Owl Carousel at a specific viewport width
提问by abbas_arezoo
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.
我目前正在使用 Owl Carousel 在台式机/笔记本电脑大小的设备上显示画廊。但是，在较小的设备上，我想禁用插件并显示堆叠在彼此下方的每个图像。
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.
这可能吗？我知道您可以调整 Owl Carousel 以在屏幕上的某些断点处显示一定数量的图像。但我希望能够完全关闭它，删除所有 div 等。
Here's a pen of what i'm currently working with at the moment: http://codepen.io/abbasinho/pen/razXdN
这是我目前正在使用的一支笔：http: //codepen.io/abbasinho/pen/razXdN
HTML:
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:
CSS：
#carousel {
width: 100%;
height: 500px;
}
.carousel-item {
width: 100%;
height: 500px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
jQuery:
jQuery：
$("#carousel").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem: true
});
Any help is gratefully received as ever!
一如既往地感谢任何帮助！
回答by mcmimik
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:
如果屏幕宽度大于 854px ，我必须禁用插件。当然，您可以更改代码以满足您的需要。这是我的解决方案：
- Check the viewport widthbefore call the plugin.
- 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.
- 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 eventdestroy.owl.carouseland remove the unnecessary wrapper element'owl-stage-outer'after it.
- 在调用插件之前检查视口宽度。
- 如果宽度好调用插件，调用插件。否则添加 'off' 类以显示插件已被调用和销毁。
- 调整大小时：
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();
}
}
});
});
And a bit of CSS to show disabled Owl element:
还有一些 CSS 来显示禁用的 Owl 元素：
.owl-carousel.off {
display: block;
}
回答by Mark Williams
Easier to use a CSS based solution
更容易使用基于 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;
}
}回答by Aline Vianna
mcmimik's answeris correct, but I had to make one change for it to work for me.
mcmimik 的回答是正确的，但我必须做一个改变才能让它对我有用。
In the 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();
}
}
});
Swap outowl.addClass('off').trigger('destroy.owl.carousel');for owl.addClass('off').data("owlCarousel").destroy();:
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();
}
}
});
回答by Roy van Wensen
function owlInitialize() {
if ($(window).width() < 1024) {
$('#carousel').owlCarousel();
}else{
$('#carousel').owlCarousel('destroy');
}
}
$(document).ready(function(e) {
owlInitialize();
});
$(window).resize(function() {
owlInitialize();
});
Working Fiddle: https://jsfiddle.net/j6qk4pq8/187/
回答by Gavin Simpson
Simple, use jquery. Add a class to the carousel's container div, for example "<div id="carousel class='is_hidden'>" with some css for example ".is_hidden{display:none;}". Then use jquery to remove the class, or add the class, depending on window width.
很简单，使用jquery。将一个类添加到轮播的容器 div，例如“ <div id="carousel class='is_hidden'>”和一些 css，例如“ .is_hidden{display:none;}”。然后使用 jquery 删除类，或添加类，具体取决于窗口宽度。
