如何在桌面上禁用 owl-carousel 并在移动设备上启用

Question

我正在使用 owl-carousel 插件（ https://owlcarousel2.github.io/OwlCarousel2/ ）。我想在桌面上禁用 owl-carousel，这样我的所有内容都会显示在一行中，并在移动设备上启用，这样我的内容就会一个接一个地滑动。我尝试了一些代码，但它不工作。

你能帮我解决这个问题吗？

 $(document).ready(function() {
	 $("#owl_about_main_slider").owlCarousel({
      navigation : true, // Show next and prev buttons
      slideSpeed : 500,
      margin:10,
      paginationSpeed : 400,
      autoplay:true,
      items : 1,
      itemsDesktop : false,
      itemsDesktopSmall : false,
      itemsTablet: false,
      itemsMobile : false,
      loop:true,
      nav:true,
      navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
  });
	  });

  $(function() {
    var owl = $('.owl-carousel'),
        owlOptions = {
            loop: false,
            margin: 10,
            responsive: {
                0: {
                    items: 1
                }
            }
        };

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

 html,body{
  	margin: 0;
  	padding: 0;
  	height: 100%;
  }
body .owl-nav div{
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
border:1px solid #000;
width: 40px;
height: 40px;
border-radius: 50%;
}
body .owl-prev{
  left: 0;
  display: flex;
}
body .owl-next{
  right: 0;
  display: flex;
}
body .owl-prev i, body .owl-next i{
  margin: auto;
}
#owl_about_main_slider div h2{
text-align: center;
}
.owl-carousel.off {
    display: block;
}

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

<div id="owl_about_main_slider" class="owl-carousel">
    <div><h2>This is First Slider</h2></div>
    <div><h2>This is Second Slider</h2></div>
    <div><h2>This is Third Slider</h2></div>
    <div><h2>This is Fourth Slider </h2></div>
</div>

原文由 user6930268 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

现在，看起来您在文档准备好后立即加载轮播，然后寻找设备宽度（例如检查移动设备）。相反，首先确定设备宽度，然后在宽度低于某个阈值时应用 owlCarousel 是否有意义？

是这样的：

 $(document).ready(function() {
  if ( $(window).width() < 854 ) {
    startCarousel();
  } else {
    $('.owl-carousel').addClass('off');
  }
});

$(window).resize(function() {
    if ( $(window).width() < 854 ) {
      startCarousel();
    } else {
      stopCarousel();
    }
});

function startCarousel(){
  $("#owl_about_main_slider").owlCarousel({
     navigation : true, // Show next and prev buttons
     slideSpeed : 500,
     margin:10,
     paginationSpeed : 400,
     autoplay:true,
     items : 1,
     itemsDesktop : false,
     itemsDesktopSmall : false,
     itemsTablet: false,
     itemsMobile : false,
     loop:true,
     nav:true,
     navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
  });
}
function stopCarousel() {
  var owl = $('.owl-carousel');
  owl.trigger('destroy.owl.carousel');
  owl.addClass('off');
}

 html,body{
  	margin: 0;
  	padding: 0;
  	height: 100%;
  }
body .owl-nav div{
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
border:1px solid #000;
width: 40px;
height: 40px;
border-radius: 50%;
}
body .owl-prev{
  left: 0;
  display: flex;
}
body .owl-next{
  right: 0;
  display: flex;
}
body .owl-prev i, body .owl-next i{
  margin: auto;
}
#owl_about_main_slider div h2{
text-align: center;
}
.owl-carousel.off {
    display: block;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

<div id="owl_about_main_slider" class="owl-carousel">
    <div><h2>This is First Slider</h2></div>
    <div><h2>This is Second Slider</h2></div>
    <div><h2>This is Third Slider</h2></div>
    <div><h2>This is Fourth Slider </h2></div>
</div>

原文由 yinken 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在屏幕分辨率的响应检查期间，您可以轻松地在桌面上销毁猫头鹰轮播并在屏幕尺寸 1280 下启用猫头鹰轮播。

 function owlInitialize() {
if ($(window).width() < 1280) {
    $('.prdt_category').addClass("owl-carousel");
    $('.owl-carousel').owlCarousel({
        loop:false,
        margin: 5,
        nav: true,
        navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
        dots: false,
        responsive:{
            0:{
                items:3,
            },
            480:{
                items:4,
            },
            640:{
                items:5,
            },
            1000:{
                items:8,
            }
        }
    });
}else{
    $('.owl-carousel').owlCarousel('destroy');
    $('.prdt_category').removeClass("owl-carousel");
}
}
$(document).ready(function(e) {
owlInitialize();
});
$(window).resize(function() {
owlInitialize();
});

原文由 Jomal Johny 发布，翻译遵循 CC BY-SA 4.0 许可协议