使用 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。

为了转到单击图像区域的下一张幻灯片，您可以使用：

$(document).on('click', '.owl-stage-outer', function(e) {
   $(".owl-carousel").trigger('next.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)

}

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