使用 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',&nbsp;'.owl-stage-outer',&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;$(".owl-carousel").trigger('next.owl.carousel'); })片段：function counter(event) {&nbsp; &nbsp; var element&nbsp; &nbsp;= event.target;&nbsp; &nbsp; var items&nbsp; &nbsp; &nbsp;= event.item.count;&nbsp; &nbsp; var item&nbsp; &nbsp; &nbsp; = event.item.index + 1;&nbsp; &nbsp; $('.counter').html((item < 10 ? '0' : '') + item + "/" + (items < 10 ? '0' : '') + items)}$(function () {&nbsp; &nbsp; var owl = $('.owl-carousel');&nbsp; &nbsp; owl.owlCarousel({&nbsp; &nbsp; &nbsp; &nbsp; items:1,&nbsp; &nbsp; &nbsp; &nbsp; video: true,&nbsp; &nbsp; &nbsp; &nbsp; lazyLoad:true,&nbsp; &nbsp; &nbsp; &nbsp; mouseDrag: false,&nbsp; &nbsp; &nbsp; &nbsp; touchDrag: true,&nbsp; &nbsp; &nbsp; &nbsp; loop: false,&nbsp; &nbsp; &nbsp; &nbsp; onInitialized: counter,&nbsp; &nbsp; &nbsp; &nbsp; onTranslated: counter&nbsp; &nbsp; });&nbsp; &nbsp; // if the screen size is not a desktop....&nbsp; &nbsp; if (screen.width < 2000 && screen.height < 100000) {&nbsp; &nbsp; &nbsp; &nbsp; $(document).on('click', '.owl-stage-outer', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".owl-carousel").trigger('next.owl.carousel');&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }});<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">&nbsp; &nbsp; <div class="item"><h4>1</h4></div>&nbsp; &nbsp; <div class="item"><h4>2</h4></div>&nbsp; &nbsp; <div class="item"><h4>3</h4></div>&nbsp; &nbsp; <div class="item"><h4>4</h4></div>&nbsp; &nbsp; <div class="item"><h4>5</h4></div>&nbsp; &nbsp; <div class="item"><h4>6</h4></div>&nbsp; &nbsp; <div class="item"><h4>7</h4></div>&nbsp; &nbsp; <div class="item"><h4>8</h4></div>&nbsp; &nbsp; <div class="item"><h4>9</h4></div>&nbsp; &nbsp; <div class="item"><h4>10</h4></div>&nbsp; &nbsp; <div class="item"><h4>11</h4></div>&nbsp; &nbsp; <div class="item"><h4>12</h4></div></div><div class="counter"></div>