I'm building a website where I need to have touch enabled swipe functionality for mobile but then fall back to the default styling for larger screensizes.

I've tried using the code below to remove the class which is passed to the OWL function but unfortunately it doesn't work in the way I need it to. It simply creates a larger version of the slider for desktop when I need to to pletely ignore the OWL function pletely unless it is on mobile.

Below is all the code I am using. Let me know if there is a solution to this that someone else has e across or if you need more info my end.

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

});

I'm building a website where I need to have touch enabled swipe functionality for mobile but then fall back to the default styling for larger screensizes.

I've tried using the code below to remove the class which is passed to the OWL function but unfortunately it doesn't work in the way I need it to. It simply creates a larger version of the slider for desktop when I need to to pletely ignore the OWL function pletely unless it is on mobile.

Below is all the code I am using. Let me know if there is a solution to this that someone else has e across or if you need more info my end.

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

});

• javascript
• jquery
• html
• css
• owl-carousel-2

2 Answers 2

Try adding the verification in your document ready state. Try this

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

});

Working perfect Simple solution no need js Just add CSS.

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