如何在桌面上禁用 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>

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>

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

Answer 3

您可以使用此代码轻松销毁桌面/响应式设备上的 Owl Carousel。

function postsCarousel() {
    var checkWidth = $(window).width();
    var owlPost = $("#latest-posts .posts-wrapper");
    if (checkWidth > 767) {
        if (typeof owlPost.data('owl.carousel') != 'undefined') {
            owlPost.data('owl.carousel').destroy();
        }
        owlPost.removeClass('owl-carousel');
    } else if (checkWidth < 768) {
        owlPost.addClass('owl-carousel');
        owlPost.owlCarousel({
            items: 1,
            slideSpeed: 500,
            animateOut: 'fadeOut',
            touchDrag: false,
            mouseDrag: false,
            autoplay: true,
            autoplaySpeed: 8000,
            autoplayTimeout: 8000,
            dots: true,
            loop: true
        });
    }
}

postsCarousel();
$(window).resize(postsCarousel);