Slick Slider技术问题：如何实现点击删除指定幻灯片

我明白你现在的困扰：之前的代码只能删除最后一张幻灯片，核心问题在于你依赖了固定的slideIndex变量，没法精准获取点击目标的索引。要实现点击任意幻灯片就能删除的功能，我们需要调整HTML结构和JS逻辑，让每个幻灯片都拥有独立的删除触发点，并且能正确拿到对应幻灯片的索引。

修改后的HTML结构 #

首先给每个幻灯片内部添加专属的删除按钮，让用户可以直接点击对应幻灯片上的按钮操作：

<div class="slider add-remove slick-initialized slick-slider">
  <div aria-live="polite" class="slick-list draggable">
    <div class="slick-track" style="opacity: 1; width: 80px; transform: translate3d(0px, 0px, 0px);" role="listbox">
      <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 80px;" tabindex="-1" role="option" aria-describedby="slick-slide100">
        <div class="slide-content">
          <h3>1</h3>
          <button class="js-delete-slide">删除此幻灯片</button>
        </div>
      </div>
      <!-- 其他幻灯片都按照这个结构添加即可 -->
    </div>
  </div>
</div>

修改后的JavaScript逻辑 #

接下来通过事件委托绑定删除事件，精准获取点击目标的索引后调用slickRemove方法：

// 用事件委托绑定，确保动态新增的幻灯片删除按钮也能生效
$('.add-remove').on('click', '.js-delete-slide', function() {
  // 找到当前点击按钮所属的幻灯片元素
  const targetSlide = $(this).closest('.slick-slide');
  // 从slick自动生成的属性里拿到该幻灯片的索引
  const slideIndex = parseInt(targetSlide.attr('data-slick-index'));

  // 调用slick的删除方法，传入目标索引
  $('.add-remove').slick('slickRemove', slideIndex);

  // 如果你之前有维护全局的slideIndex变量，这里可以根据删除的索引做调整
  // 比如：如果当前全局索引大于被删除的索引，就减1
  // if (window.slideIndex > slideIndex) {
  //   window.slideIndex--;
  // }
});

关键逻辑说明 #

• 事件委托：选择父容器绑定点击事件，而不是直接给每个按钮绑定，这样后续动态添加的幻灯片删除按钮也能正常触发事件。
• 精准获取索引：每个幻灯片都会被slick自动加上data-slick-index属性，我们直接读取这个属性就能拿到当前幻灯片的准确索引，不用依赖外部变量。
• slickRemove的正确用法：slickRemove(index)方法接受一个索引参数，传入对应的值就能删除指定幻灯片，而非只能删除最后一张。

这样修改后，点击任意幻灯片上的删除按钮，就能直接删除对应的幻灯片了。

内容的提问来源于stack exchange，提问作者user9664977