在Angular的slick.js垂直滑块中添加自定义分隔div的问题

我明白你想要的效果——在垂直滚动的Slick滑块每张图片的底部间隙处，放置一个独立的带虚线边框的div，并且后续还要给它加交互功能。你之前把<hr>放在slide内部的思路不对，因为它会成为slide内容的一部分，跟着slide滚动，而不是固定在间隙位置。下面是具体的解决方案：

步骤1：修改HTML结构 #

首先移除原来放在slide内部的<hr>，因为我们要把分隔元素放在slide之间，而不是slide里面：

<!--slider image container-->
<div #slick class="mySlider" id="images">
  <div class="item image-container" *ngFor="let data of serverData; let ind = index;">
    <img 
      (load)="imageLoaded($event.target)" 
      src="{{ data['imageUrl'] }}" 
      class="img-fluid target slick-img" 
      [ngStyle]="{'zoom': zoom}" 
      alt="image container"
    >
  </div>
</div>

步骤2：在Slick初始化后插入分隔元素 #

我们需要在Slick初始化完成后，手动把自定义分隔div插入到每个slide（除了最后一个）的后面，这样它就会位于垂直滑块的间隙位置。同时给它绑定点击事件，满足后续交互需求：

private initializeSlick() {
  let slickElement = this.getSlick();
  
  // 先清理之前的分隔元素，避免重复插入
  slickElement.find('.slide-divider').remove();
  
  // 初始化Slick
  slickElement.slick(this.slickSetting);

  // 获取Slick的轨道容器和所有slide
  const slickTrack = slickElement.find('.slick-track');
  const slides = slickTrack.find('.slick-slide');

  // 遍历每个slide，插入分隔元素（最后一个slide后面不需要）
  slides.each((index, slide) => {
    if (index !== slides.length - 1) {
      const divider = $('<div class="slide-divider"></div>');
      // 绑定点击事件，这里可以替换成你的交互逻辑
      divider.on('click', () => {
        console.log(`点击了第${index}和第${index+1}张图片之间的分隔线`);
        // 比如弹出模态框、跳转页面等操作
      });
      $(slide).after(divider);
    }
  });
}

步骤3：设置分隔元素的样式 #

通过CSS让分隔元素完美适配垂直滑块的间隙，调整虚线样式、高度和位置：

.mySlider {
  position: relative;
  /* 根据你的需求设置滑块宽度 */
  width: 400px;
  margin: 0 auto;
}

/* 垂直模式下，给每个slide设置固定高度，确保间隙均匀 */
.mySlider .slick-slide {
  height: 300px; /* 替换成你的图片实际高度 */
}

/* 自定义分隔元素样式 */
.slide-divider {
  width: 100%;
  height: 20px; /* 调整分隔元素的高度，控制间隙大小 */
  border-bottom: 2px dashed #000; /* 底部虚线边框，也可以改成整个div带虚线边框 */
  /* 如果要整个div带虚线边框：border: 1px dashed #000; */
  box-sizing: border-box;
  display: block;
  cursor: pointer; /* 提示可点击 */
}

/* 确保垂直模式下Slick轨道的布局正确 */
.mySlider .slick-track {
  display: block;
}

为什么这个方案可行？ #

• 分隔元素是独立于slide的DOM节点，位于Slick的轨道容器（.slick-track）内，会跟着滑块的滚动自然出现在间隙位置
• 完全支持自定义样式和交互，你可以给.slide-divider添加hover效果、动画，或者绑定任何你需要的事件
• 初始化前清理旧的分隔元素，避免数据更新后出现重复元素

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