Using Owl Carousel 2, disable dragging on desktop and enabling click through functionality

Question

I am using Owl Carousel 2 and would like to implement a custom interaction on desktop, while maintaining the default touch swipe interaction on mobile devices.

I am able to disable mouseDrag (see my JS below), but would like to add desktop-only functionality of clicking anywhere in the slider to advance to the next slide. So essentially instead of mouse dragging the image to reach the next slide on desktop, the user would click anywhere on the image to trigger the next slide.

Is there a way to detect desktop screen size and then make the entire slider area as a custom click next function? Or does some sort of mouseClick function exist that could exist in tandem with mouseDrag: false?

<script>
$(function(){
var owl = $('.owl-carousel');
owl.owlCarousel({
  items:1,
  video: true,
  lazyLoad:true,
  mouseDrag: false,
  touchDrag: true,
  loop: false,
  onInitialized: counter,
  onTranslated: counter
});

$(".next").click(function() {
    owl.trigger('next.owl.carousel');
});

$(".prev").click(function() {
    owl.trigger('prev.owl.carousel');
});

function counter(event) {
    var element   = event.target;
    var items     = event.item.count;
    var item      = event.item.index + 1;

  $('.counter').html((item < 10 ? '0' : '') + item + "/" + (items < 10 ? '0' : '') + items)
}
});
</script>

Answer 1

For the screen width / height you can use screen interface.

In order to go to the next slide on click image area you can use:

$(document).on('click', '.owl-stage-outer', function(e) {
   $(".owl-carousel").trigger('next.owl.carousel');
})

The snippet:

function counter(event) {
    var element   = event.target;
    var items     = event.item.count;
    var item      = event.item.index + 1;

    $('.counter').html((item < 10 ? '0' : '') + item + "/" + (items < 10 ? '0' : '') + items)
}
$(function () {
    var owl = $('.owl-carousel');
    owl.owlCarousel({
        items:1,
        video: true,
        lazyLoad:true,
        mouseDrag: false,
        touchDrag: true,
        loop: false,
        onInitialized: counter,
        onTranslated: counter
    });

    // if the screen size is not a desktop....
    if (screen.width < 2000 && screen.height < 100000) {
        $(document).on('click', '.owl-stage-outer', function(e) {
            $(".owl-carousel").trigger('next.owl.carousel');
        })
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

<div class="counter"></div>