使用猫头鹰旋转木马 2 的动态自动播放时间

Question

我需要在我的猫头鹰轮播中动态设置自动播放超时。第一张幻灯片的自动播放超时必须设置为 7000，紧挨着 5000。我尝试过使用布尔值和设置超时，但没有积极的结果。是否可以设置动态自动播放超时？有什么想法吗？

$(".typology-cover-slider").owlCarousel({
loop: true,
autoHeight: true,
autoWidth: false,
items: 1,
margin: 0,
nav: true,
fluidSpeed: 100,
autoplay: true,
autoplayTimeout: 7000,
autoplaySpeed: 400,
navSpeed: 400,
});

Answer 1

我创建了一个回调函数来在第一项停止自动播放。当项目更改时(在检查正确的项目编号后(，将触发此回调函数。我在猫头鹰轮播中发现了一个错误，以获取正确的当前项目编号，但在这里：https://github.com/OwlCarousel2/OwlCarousel2/issues/1029 非常聪明的用户找到了我使用的一个很好的解决方案。

为了加快我的示例，我将自动播放超时设置为仅 1 秒。您可以将其更改为 5s。

小心：我删除了你的autoplay:true因为它是在回调函数中设置的

var owl=$(".owl-carousel")
	owl.owlCarousel({
	    loop: true,
	    autoHeight: true,
	    autoWidth: false,
	    items: 1,
	    margin: 0,
	    nav: true,
	    fluidSpeed: 100,
	    autoplayTimeout: 1000, /* change to 5000 for normal autoplayTimeout. I set 1s only speed up this exemple */
	    autoplaySpeed: 400,
	    navSpeed: 400,
onChanged: callBack
});
function callBack(event) {
	// Solution to have correct item number. See: https://github.com/OwlCarousel2/OwlCarousel2/issues/1029. Thanks to Modicrumb
	var current = (event.item.index + 1) - event.relatedTarget._clones.length / 2;
	var allItems = event.item.count;
	if (current > allItems || current <= 0) {
	current = allItems - (current % allItems);
	}
	if(current==1){
		owl.trigger('stop.owl.autoplay')
			setTimeout(function() {owl.trigger('play.owl.autoplay')}, 7000)   
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>

<div class="owl-carousel owl-theme">
	        <div class="item">boxes1 </div>
	        <div class="item">boxes2</div>
	        <div class="item">boxes3</div>
	        <div class="item">boxes4</div>
	        <div class="item">boxes5</div>
	        <div class="item">boxes6</div>
	        <div class="item">boxes7</div>
	        <div class="item">boxes8</div>
	        <div class="item">boxes9</div>
	        <div class="item">boxes10</div>
	    </div>

Answer 2

使用onInitialized回调函数将第一张幻灯片停止更长时间：

var selector = $(".typology-cover-slider");
selector.owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 5000,
onInitialized: function() { 
selector.trigger('stop.owl.autoplay');
setTimeout(function() {selector.trigger('play.owl.autoplay')}, 7000)   
},
});