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

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

---

如果您能分享一个带有示例的代码片段，那对我来说会很有帮助。 - user6930268

我编辑了早先的回复。我在stopCarousel函数中添加了一个样式更改到“owl”元素，因为目前“.owl-carousel”类设置为“display:none”。 - yinken

谢谢回复，我测试了你的代码，但它没有起作用，甚至在桌面上也没有得到内容。 - user6930268

抱歉，那里出现了一个错误...现在应该可以工作了。 - yinken

很抱歉地说，它仍然没有起作用。这一次我在桌面上得到了内容，但是在移动设备上没有得到。 - user6930268

Answer 2

您可以在响应式检查屏幕分辨率时，在桌面上轻松禁用Owl Carousel并在屏幕大小为1280以下启用Owl Carousel。

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

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

- Rashed