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>
添加回答
舉報