使用 Owl Carousel 2，禁用在桌面上拖动并启用点击功能

Question

我正在使用 Owl Carousel 2，并希望在桌面上实现自定义交互，同时在移动设备上保持默认的触摸滑动交互。

我可以禁用 mouseDrag（请参阅下面的 JS），但想添加仅桌面功能，即单击滑块中的任意位置以前进到下一张幻灯片。因此，本质上不是鼠标拖动图像到达桌面上的下一张幻灯片，而是用户单击图像上的任意位置来触发下一张幻灯片。

有没有办法检测桌面屏幕大小，然后将整个滑块区域设置为自定义单击下一步功能？或者是否存在某种可以与 mouseDrag: false 一起存在的 mouseClick 函数？

<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

对于屏幕宽度/高度，您可以使用screen interface。

为了在点击图像区域转到the next slide，您可以使用：

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

sn-p：

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>