我正在使用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>
答案 0 :(得分：7)
现在，看起来您在文档准备好后立即加载轮播，然后查找设备宽度（例如检查移动设备）。相反，首先确定设备宽度是否有意义，如果宽度低于某个阈值，则应用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>
答案 1 :(得分：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();
});
答案 2 :(得分：0)
您可以使用此代码在桌面/响应设备上轻松销毁猫头鹰轮播。
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);