亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 Owl Carousel 2,禁用在桌面上拖動并啟用點擊功能

使用 Owl Carousel 2,禁用在桌面上拖動并啟用點擊功能

慕工程0101907 2023-02-24 10:41:55
我正在使用 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>
查看完整描述

1 回答

?
神不在的星期二

TA貢獻1963條經驗 獲得超6個贊

對于屏幕寬度/高度,您可以使用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>


查看完整回答
反對 回復 2023-02-24
  • 1 回答
  • 0 關注
  • 273 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號