是否可以为猫头鹰轮播项目设置不同的自动播放超时?

Question

我有一个轮播滑块，其中包括照片和视频作为项目。那么，是否可以为图像项目设置自动播放超时：5000，为视频项目设置自动播放超时：25000？

提前谢谢。

Answer 1

为了解决这个问题，我使用了这种方法：

• 第一次激活 OWL 时，请为第一个图像提供您想要的时间(例如，在我的情况下为 6s(

  $(".owl-carousel"(.owlCarousel({ 自动播放：真， 自动播放超时：6000， 动画输出："淡出"， 懒惰加载：真， 导航：假， 商品： 1 });

• 然后，在第一个"更改"事件(不是 changeD，只是更改这是确切的变化时刻(上，您检查这是第一个更改。如果是这种情况，您停止并重新启动猫头鹰，从现在开始触发新的间隔，例如在我的情况下为 3s：

  $('.owl-carousel'(.on('change.owl.carousel'， function (e( { 控制台.log(e(; if (e.namespace && e.property.name === 'position' && (e.relatedTarget.relative(e.property.value( == 1( ) { $('.owl-carousel'(.trigger('stop.owl.autoplay'(; 设置超时( 函数 (( { $('.owl-carousel'(.trigger('play.owl.autoplay'， [3000](;从现在开始，我们去3s }, 0); } });

现在，将视频放在第一个元素上，您就完成了！

Answer 2

是的，就我而言，我的猫头鹰轮播上有视频，我想将视频时间保持在 10 秒，休息为 5 秒，我做了这个自定义。

$("#carousel").owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
smartSpeed: 800,
nav: false,
items: 1,
onInitialized: function(e) { 
var $activeItem = $("#carousel").find('.owl-item.active');
var videItem  = $activeItem.find('video');
if(videItem.length >0){
$('#carousel').trigger('stop.owl.autoplay');
setTimeout(function () { 
$("#carousel").trigger('play.owl.autoplay')}, 10000)
}
},
onTranslated: function(e){
var $activeItem = $("#carousel").find('.owl-item.active');
var videItem  = $activeItem.find('video');
if(videItem.length >0){
$('#carousel').trigger('stop.owl.autoplay');
setTimeout(function () { 
$("#carousel").trigger('play.owl.autoplay')}, 10000)
}
}
});

在每次翻译/更改项目时，它将检查当前活动项目是否具有视频元素。

同样，我们可以使用此代码扩展每个项目的位置

onTranslated: function(e){
var activeItemIndex = e.item.index;
if(activeItemIndex == 2){
$('#carousel').trigger('stop.owl.autoplay');
setTimeout(function () { 
$("#carousel").trigger('play.owl.autoplay')}, 10000)
}
}