javascript - OwlCarousel 2 的动态自动播放时间

Question

我需要在我的 owlCarousel 中动态设置 autoplayTimeout。第一张幻灯片必须将 autoplayTimeout 设置为 7000，紧挨着 5000。我已经尝试使用 boolean 和 setTimeout，但没有积极的结果。是否可以设置动态自动播放超时？有什么想法吗？

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

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

为了加快我的示例，我将 autoplayTimeout 设置为仅 1 秒。您可以将其更改为 5 秒。

小心:我删除了你的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>