Owl 轮播 2 删除特定项目

Question

我使用 Owl Carousel 2，我的 HTML 代码如下。每张图片的右上角都会有一个小“x”图标，点击后我希望将图片从轮播中移除。

第一次点击时效果很好，因为传递给“remove_image”函数的索引是正确的。但是第二次点击另一张图片时，索引将不再正确。

例如：第一次点击 image2.jpg，传递给“remove_image”的索引是 1，这是正确的。图片已从 Owl 轮播 2.

中正确删除

第二次点击 image4.jpg，传递给“remove_image”的索引是 3。这个索引是错误的。这是因为 Owl 删除 image2 后 Carousel 2 已更新。 image4.jpg 的正确索引现在是 2。

我该如何解决这个问题？请帮忙。谢谢

<div class="owl-carousel owl-theme">
    <div class="item"><img src="/image1.jpg" /><a onclick="remove_image(0);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image2.jpg" /><a onclick="remove_image(1);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image3.jpg" /><a onclick="remove_image(2);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image4.jpg" /><a onclick="remove_image(3);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image5.jpg" /><a onclick="remove_image(4);"><i class="icon-remove"></i></a></div>
    <div class="item"><img src="/image6.jpg" /><a onclick="remove_image(5);"><i class="icon-remove"></i></a></div>
</div>

function remove_image(index) {
    $('.owl-carousel').owlCarousel('remove', index).owlCarousel('update');
}

Answer 1

您在对 remove_image 的调用中使用了固定索引。由于这些在删除项目时不会更新，因此这些固定索引变得不准确。

一个快速（但不一定是最好的）修复方法是使用 this，而不是固定索引，来传入锚元素本身，然后让您的函数从中导出目标索引：

<div class="owl-carousel owl-theme">
    <div class="item"><img src="/image1.jpg" /><a onclick="remove_image(this);"><i class="icon-remove"></i></a></div>
    <!-- more slides -->
</div>

function remove_image(trigger) {
    var $item = $(trigger).closest('.owl-item');
    var index = $item.closest('.owl-stage').children().index($item);
    $item.closest('.owl-carousel').owlCarousel('remove', index).owlCarousel('update');
}

.owl-stage 和 .owl-item 是初始化 owl 轮播时添加的几个元素中的一部分。 .owl-stage 位于用户提供的容器和项目之间，包装这些项目。 .owl-item 包装每个项目并且是 .owl-stage.

的子项

参考文献：

this in the context of event handlers
jQuery's .index()
jQuery's .closest()

Owl 轮播 2 删除特定项目

Owl Carousel 2 remove specific item

javascript

jquery

owl-carousel

owl-carousel-2