禁用特定视口宽度的Owl Carousel

Question

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

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

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

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 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，例如“ <div id="carousel class='is_hidden'>”，并添加一些 css，例如“ .is_hidden{display:none;}”。然后使用 jquery 删除该类，或添加该类，具体取决于窗口宽度。