删除 OwlCarousel 中的活动（居中）项目

Question

我希望用户能够删除 OwlCarousel 中的 active/centered 项目。我找到的唯一一段代码w.r.t。删除项目是这样的，所以这似乎是一个相当罕见的问题：

$(".owl-carousel").trigger('remove.owl.carousel', [itm]).trigger('refresh.owl.carousel');

它有效，但指的是轮播中的当前项目 ID，即如果我从我的静态 HTML 中给出数字而不重新索引，则不再有效。这是 fiddle： https://jsfiddle.net/87x312wv/6

除了计算item-ID，还有什么更好的方法吗？我宁愿寻找类似的东西 - 会更自然：

$(".owl-carousel").trigger('remove.owl.carousel', $('owl-carousel .active')).trigger('refresh.owl.carousel');

有什么想法吗？

Answer 1

我找到了解决办法。例如，假设您想通过单击删除每个项目：

html代码：

<div class="owl-carousel owl-theme">
  <div class="item"><h4>1</h4></div>
  <div class="item"><h4>2</h4></div>
  <div class="item"><h4>3</h4></div>
  <div class="item"><h4>4</h4></div>
  <div class="item"><h4>5</h4></div>
  <div class="item"><h4>6</h4></div>
  <div class="item"><h4>7</h4></div>
  <div class="item"><h4>8</h4></div>
  <div class="item"><h4>9</h4></div>
  <div class="item"><h4>10</h4></div>
  <div class="item"><h4>11</h4></div>
  <div class="item"><h4>12</h4></div>
</div>

js代码：

  $(".owl-item").on("click", function (event) {
    var items = $(".owl-item");
    items.each((index, item) => {
      if (item.isEqualNode(event.currentTarget)) {
        $(".owl-carousel")
          .trigger("remove.owl.carousel", index)
          .trigger("refresh.owl.carousel");
        return;
      }
    });
  });

Answer 2

我也找到了一个答案，它甚至可能在性能方面更好一点：每次只重新索引项目一次：基本上使用伴随函数设置选项 onRefreshed: reindexItems,，见下文

https://jsfiddle.net/q23Lr90m/1/

$(document).ready(function() {
  startCarousel();
  $('span').on('click', function() {
    var dat = $(this).parent().parent().parent().data();
    console.log(dat);
    var itm = dat.item;
    $(".owl-carousel").trigger('remove.owl.carousel', [itm]).trigger('refresh.owl.carousel');
  })
});
function reindexItems() {
  $(".owl-item:not(.cloned)").each(function(idx) {
    //console.log('called');
    $(this).attr('data-item', idx);
  });
}

function startCarousel(){
  $("#owl_about_main_slider").owlCarousel({
     navigation : true, // Show next and prev buttons
     slideSpeed : 500,
     margin:10,
     onRefreshed: reindexItems,
     paginationSpeed : 400,
     autoplay:true,
     items : 1,
     itemsDesktop : false,
     itemsDesktopSmall : false,
     itemsTablet: false,
     itemsMobile : false,
     loop:true,
     nav:true,
     navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
  });
}

删除 OwlCarousel 中的活动（居中）项目

Deleting Active (centered) Item in OwlCarousel

javascript

html

jquery

owl-carousel