Owl Carousel 2 - 关闭桌面端功能

Question

我正在构建一个网站，在其中需要为移动设备启用触摸滑动功能，但在较大屏幕尺寸下回退到默认样式。

我尝试使用下面的代码来移除传递给OWL函数的类，但不幸的是它并不能按照我需要的方式工作。它只是在桌面上创建了一个更大的滑块版本，而我需要它在除移动设备外完全忽略OWL函数。

下面是我正在使用的所有代码。如果有其他人遇到过这个问题的解决方案，请告诉我，或者如果您需要更多信息，请与我联系。 HTML：

<div class="row bookRow row-single is_scrollable col-sm-12" style="background-color: <?php echo $bg_color; ?>;">
    <?php foreach($products as $product){ ?>
        <div class="product-list-box">
            <a href="<?php echo $product['href']; ?>">
                <img src="<?php echo $product['thumb']; ?>" />
            </a>
            <div class="caption" align="left">
                <?php echo $product['cart_link']; ?>
                <br />
                <a href="<?php echo $product['href']; ?>" class="title-link"><?php echo $product['name']; ?></a><br />
                <?php echo $product['author']; ?>
            </div>
        </div>
    <?php } ?>
</div>

CSS

/* PRODUCT LISTINGS */
.product-list-box {
    margin: 10px;
    -webkit-box-shadow: 0 3px 7px -1px #E3E2E2;
    -moz-box-shadow: 0 3px 7px -1px #E3E2E2;
    box-shadow: 0 3px 7px -1px #E3E2E2;
    background-color: #F5F3E7;  
    float: left;
}
.product-list-box img {
    /*margin: 0px;
    padding: 0px;
    width: 100%;
    max-width: 200px;*/
}
.product-list-box .caption {
    display: none;  
}
.product-list-box img:hover, .author-list-box img:hover {
    opacity: 0.8;   
}

JS

$(document).ready(function() {

$(window).resize(function() {
 if($(window).width() < 767){
    $('.row-single').addClass('is_scrollable owl-carousel owl-theme owl-loaded owl-text-select-on'); 
 } else {
    $('.row-single').removeClass('is_scrollable owl-carousel owl-theme owl-loaded owl-text-select-on'); 
 }
});

$('.is_scrollable').owlCarousel({
    loop:true,
    margin:0,
    nav:false,
    mouseDrag: false,
    touchDrag: true,
    responsive:{
        0:{
            items:2
        },
        600:{
            items:3 
        }
    }
})

});

- JackWillDavis

Answer 1

在文档准备状态下尝试添加验证。试试这个：

$(document).ready(function() {
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){
        $('.row-single').addClass('is_scrollable owl-carousel owl-theme owl-loaded owl-text-select-on'); 
     } else {
        $('.row-single').removeClass('is_scrollable owl-carousel owl-theme owl-loaded owl-text-select-on'); 
     }
}

$('.is_scrollable').owlCarousel({
    loop:true,
    margin:0,
    nav:false,
    mouseDrag: false,
    touchDrag: true,
    responsive:{
        0:{
            items:2
        },
        600:{
            items:3 
        }
    }
})

});

- Sabbin

---

请查找浏览器代理以确定其是否为移动设备，而不是查看视口分辨率。 - Sabbin

Answer 2

完美运作 简单的解决方案，无需使用JavaScript，只需添加CSS即可。

.owl-carousel .owl-stage{
width:100% !important;
transition:inherit !important;
transform:inherit !important;
}
.owl-carousel.owl-drag .owl-item{
    width:50% !important;
}

- Brahmanand Gorati