[英]Owl carousel autoplay when scrolling to element not working
我想在滾動到包含它的元素時自動播放我的貓頭鷹旋轉木馬(v2)。 出於某種原因,當我用鼠標進入時,它會滑動一次然后停止。
這是我想要觸發自動播放的html元素:
<div class="owl-carousel r-latest-news-list" id="r-latest-news-slider">
所有都正確加載,因為如果我設置自動播放開始在頁面加載像往常一樣,它的工作原理。
這是我的代碼,當在該元素上輸入鼠標時觸發自動播放:
if($("#r-latest-news-slider").length > 0){
var owl = $('#r-latest-news-slider').owlCarousel({
loop:true,
margin: 30,
items: 4,
nav: false,
dots: true,
responsive:{
0:{
items:2
},
600:
items:2
},
1000:{
items:4
}
}
})
$('#r-latest-news-slider').on("mouseenter", function(e) {
console.log('mouse enter');
owl.trigger('play.owl.autoplay', [2000]);
})
}
這是我正在關注的文檔: https : //owlcarousel2.github.io/OwlCarousel2/docs/api-events.html
嘿這個問題在這里得到了解答: https : //lazyfox.io/task/qP6/owl-carousel-autoplay-when-scrolling-to-element-not-working
if($("#r-latest-news-slider").length > 0) {
var owl = $('#r-latest-news-slider').owlCarousel({
loop: true,
margin: 30,
items: 4,
nav: false,
dots: true,
responsive: {
0: {
items:2
},
600: {
items:2
},
1000: {
items:4
}
}
});
}
// Function for checking if the element is in view
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
var animate = false;
// Function activated when scrolling
$(window).scroll(function() {
// Check if the element is visible
if(isScrolledIntoView("#r-latest-news-slider") && !animate) {
owl.trigger('play.owl.autoplay', [1000]);
animate = true;
console.log('Starting animation');
} else if(!isScrolledIntoView("#r-latest-news-slider") && animate) {
owl.trigger('stop.owl.autoplay', [1000]);
animate = false;
console.log('Stopping animation');
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.