第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

使用 Owl Carousel 2,禁用在桌面上拖動(dòng)并啟用點(diǎn)擊功能

使用 Owl Carousel 2,禁用在桌面上拖動(dòng)并啟用點(diǎn)擊功能

慕工程0101907 2023-02-24 10:41:55
我正在使用 Owl Carousel 2,并希望在桌面上實(shí)現(xiàn)自定義交互,同時(shí)在移動(dòng)設(shè)備上保持默認(rèn)的觸摸滑動(dòng)交互。我可以禁用 mouseDrag(請參閱下面的 JS),但想添加僅桌面功能,即單擊滑塊中的任意位置以前進(jìn)到下一張幻燈片。所以本質(zhì)上不是鼠標(biāo)拖動(dòng)圖像到達(dá)桌面上的下一張幻燈片,用戶可以點(diǎn)擊圖像上的任意位置來觸發(fā)下一張幻燈片。有沒有辦法檢測桌面屏幕尺寸,然后將整個(gè)滑塊區(qū)域作為自定義點(diǎn)擊下一步功能?或者是否存在某種可以與 mouseDrag: false 一起存在的 mouseClick 函數(shù)?<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貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊

對于屏幕寬度/高度,您可以使用screen interface。

為了轉(zhuǎn)到單擊圖像區(qū)域的下一張幻燈片,您可以使用:

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


查看完整回答
反對 回復(fù) 2023-02-24
  • 1 回答
  • 0 關(guān)注
  • 281 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)