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

使用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

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

为了加快我的例子，我将 autoplayTimeout 设置为仅 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>

OwlCarousel 2 的动态自动播放时间

Dynamic autoplay time with OwlCarousel 2

javascript

jquery

owl-carousel