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

Posted 2023-05-07

【中文标题】在特定视口宽度处禁用 Owl Carousel

【英文标题】：Disabling Owl Carousel at a specific viewport width

【发布时间】：2015-03-30 20:36:32

【问题描述】：

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

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

【问题讨论】：

请务必阅读标签说明。这不是关于 Web 本体语言 (owl)，而是关于 Owl Carousel (owl-carousel)。

嗨，我使用了代码笔示例，并且能够为移动设备添加堆叠的图片元素。如果您将浏览器宽度设置为小于 501 像素，则移动设备可以正常工作。我使用了那些 CSS3 媒体查询文件 @media screen 和 (max-width: 500px) w3schools.com/cs-s-ref/css3_pr_mediaquery.asp Code pen codepen.io/jyrkim/pen/NPvQOe 但是，我是 Owl Carousel 的新手，当我调整浏览器大小时，按钮仍然出现在手机上手机宽度。但我希望那些 CSS3 媒体查询文件对你有用。

【参考方案1】：

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

在调用插件之前检查视口宽度。 如果宽度适合调用插件，则调用插件。否则添加“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();
            
        
    );
);

还有一些 CSS 来显示禁用的 Owl 元素：

.owl-carousel.off 
    display: block;

【讨论】：

您好，当您使用移动设备尺寸时，我遇到了一个问题，并且您想将页面大小调整到 854px窗口更进一步。你能帮我解决这个错误吗？

@hosseinghaem 嗨，你能提供一个测试用例的链接吗？

我可以将它用于多个轮播吗？

【参考方案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;
  

【讨论】：

然而，这里唯一的问题是轮播将继续运行 javascript 函数，因此不会禁用它。你只会看不到它们。

这对我来说已经足够了。

【参考方案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/

【讨论】：

你能补充一点上下文/解释吗？就目前而言，对于没有 JS 和/或 Owl Carousel 经验的用户来说，它并不是很有帮助。

@SaschaM78 当然 :-) 我放置了一个工作小提琴希望这有帮助？

这很好，但我的意思是添加一些关于您的代码功能的描述。仅代码的答案通常被视为“糟糕的答案”，因为它们没有解释他们如何以及为什么解决原始提问者所提到的问题。

【参考方案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();
        
    
);

【参考方案5】：

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

【讨论】：

嘿，感谢您的回答...该解决方案不会关闭整个画廊吗？

它只会隐藏它，仅此而已。当您删除课程时，它会再次在屏幕上弹出。

我明白了，我想让画廊在较小的设备上可见。我只想禁用轮播功能。我假设您可以在 JS 中添加一些内容，以简单地在特定窗口宽度及以下关闭 Owl Carousel。

啊哈...好吧不同的故事，当然还有不同的答案。可能然后宁愿使用jquery删除类'carousel-class'，然后重新添加它。也许只是在禁用时添加一个不同的名称类，以便重新添加类。我希望这是有道理的。