猫头鹰轮播中的活动课程答案

【问题标题】：Active Class in Owl carousel猫头鹰轮播中的活动课程
【发布时间】：2018-05-15 10:50:14
【问题描述】：

我从 JavaScript 代码在 owl carousel 中生成项目，但轮播中的项目 div 没有活动类这是我的代码：

for (var i = 0; i < data.length; i++) {

  $(".owl-carousel").trigger('add.owl.carousel', [
      '<div class= "item">' +
      '<div class="flyout-content">' +
      '<h5>' + data[i].firstName + '</h5>' +
      '<h3>' + data[i].lastName + '</h3>' +
      '</div>' +
      '</div>'
    ]
  }

【问题讨论】：

如果动态添加物品，需要重建/刷新owl carousel。
@Pedram 能否举例说明如何实现刷新事件
例如，在这个topic中它通过点击添加项目，但它使用refresh和.trigger('refresh.owl.carousel')在你的情况下$('.owl-carousel').owlCarousel('refresh');
@Pedram 谢谢你的工作:)

标签： javascript jquery owl-carousel

【解决方案1】：

正如@Pedram 所说，我这样做了，我添加了 if 语句来检查第一个索引，它的工作是代码以防有人需要它

for (var i = 0; i < data.length; i++) {
if(i == 0){
  $(".owl-carousel").trigger('add.owl.carousel', [
      '<div class= "item">' +
      '<div class="flyout-content">' +
      '<h5>' + data[i].firstName + '</h5>' +
      '<h3>' + data[i].lastName + '</h3>' +
      '</div>' +
      '</div>'
    ]);
   var owl = $('.owl-carousel');
   owl.owlCarousel();

   owl.trigger('refresh.owl.carousel');
   }
  }

【讨论】：