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

});

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

});

Answer 2

工作完美简单的解决方案无需js 只需添加CSS。

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

Owl Carousel 2 - 关闭桌面功能

2 个答案: