Javascript Owl 轮播，如何从 API 动态设置 autoplayTimeout 字段？答案

【问题标题】：Javascript Owl carousel, how can I set dynamically autoplayTimeout field from API?Javascript Owl 轮播，如何从 API 动态设置 autoplayTimeout 字段？
【发布时间】：2020-07-02 10:05:59
【问题描述】：

是否可以动态设置owl carousel字段autoplayTimeout？我从 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,
  });
},

});

【问题讨论】：

是的，有可能。
任何输入如何解决？谢谢
我刚刚添加了代码
你有一个可行的例子吗？
我设法解决了，谢谢！

标签： javascript owl-carousel

【解决方案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);
  }

【讨论】：