3

我正在构建一个网站，我需要为移动设备启用触控滑动功能，但随后回退到更大屏幕尺寸的默认样式。

我尝试使用下面的代码删除传递给 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 
        }
    }
})

});
4

2 回答 2

3

尝试在文档就绪状态下添加验证。尝试这个

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

});
于 2015-05-13T13:12:22.820 回答
0

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

.owl-carousel .owl-stage{
width:100% !important;
transition:inherit !important;
transform:inherit !important;
}
.owl-carousel.owl-drag .owl-item{
    width:50% !important;
}
于 2017-01-02T07:19:32.163 回答