Question

我需要在owlCarousel中动态设置autoplayTimeout。第一张幻灯片必须将autoplayTimeout设置为7000，然后将其设置为5000。我已经尝试过使用boolean和setTimeout，但没有取得积极的结果。可以设置动态autoplayTimeout吗？有什么想法吗？

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

使用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)   
      },
});

Answer 2

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

为加快速度，我将autoplayTimeout设置为仅1s。您可以将其更改为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>

OwlCarousel 2的动态自动播放时间

2 个答案: