Javascript Owl 轮播，如何从 API 设置动态自动播放超时字段?

Question

是否可以设置猫头鹰轮播动态字段自动播放超时？我正在从 api 获取数据。

$(document(.ready(function (( { $.ajax({ 网址： "url？api_token="， 方法："获取"， 数据类型："json"， 成功：函数(数据({ reklame = data.data;

let content = "";
let tip;
for (i = 0; i < reklame.length; i++) {
if (reklame[i].type == "video") {
content += `<div class="reklamaVideo"><video
class="video"
autoplay
loop
muted
poster="/img/load.gif"
preload="auto"
>
<source src="amazonUrl" type="video/mp4" />
<source src="amazonUrl" type="video/ogg" />
</video></div>`;
} else if (reklame[i].type == "image") {
content += `<div class="reklamaSlika"><img src="amozonUrl"></div>`;
}
}
console.log(content);
console.log(reklame);
var owl = $(".owl-carousel");
owl.html(content);
owl.owlCarousel({
items: 1,
loop: true,
margin: 0,
autoplay: true,
video: true,
autoplayTimeout: 10000,
});
},

}(;

Answer 1

这是解决方案：

let content = "";
let timings = [];
for (i = 0; i < reklame.length; i++) {
if (reklame[i].type == "video") {
content += `<div class="reklamaVideo"><video
class="video"
autoplay
loop
muted
poster="/img/load.gif"
preload="auto"
>
<source src="{reklame[i].file_path}" type="video/mp4" />
<source src="{reklame[i].file_path}" type="video/ogg" />
</video></div>`;
timings.push(reklame[i].seconds* 1000);
} else if (reklame[i].type == "image") {
content += `<div class="reklamaSlika"><img src="{reklame[i].file_path}"></div>`;
timings.push(reklame[i].seconds* 1000);
}
}
var owl = $(".reklameOwl"); 
owl.html(content);
owl.owlCarousel({
items: 1,
margin: 0,
loop: true,
onChange: callBack,
});
var currentTimeout = null;
var i = 0;
var time = 0;
function callBack(event) {
var videos = document.getElementsByClassName("video");
for (let video of videos) {
video.currentTime = 0;
}
if (currentTimeout) {
clearTimeout(currentTimeout);
}
if (i + 1 == timings.length) {
time = timings[0];
} else {
time = timings[i + 1];
}
if (i + 1 == timings.length) {
i = 0;
} else {
i++;
}
currentTimeout = dynamicTimeout(time);
}
function dynamicTimeout(time) {
return setTimeout(function () {
clearTimeout(currentTimeout);
owl.trigger("next.owl.carousel");
}, time);
}