Html 在slick.js幻灯片之间添加div时遇到问题

我正在使用slick.js和Angular，并尝试在slick slider中的每个图像后添加带有虚线边框的自定义div（它需要放置在两张幻灯片的间隙之间）。我正在使用垂直滚动实现slick滑块，如下图所示：

（p.S.上图描绘了一个以垂直格式实现的滑块。我不习惯使用Linux上的图片编辑工具，所以我从slick网站拍摄了一张图片，并垂直旋转以解释我的目的）

上图中的黑色虚线表示一个带有黑色边界的自定义div，在两张幻灯片的间隙之间完美实现后，它与下图中所述的完全相同：

我只是想不出一种方法，我可以通过它自己的单独样式附加这个边框

我的代码：

slider-component.component.html

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

我尝试了什么？

我曾尝试阅读slick的文档，并在google上集中浏览，但没有找到解决这个问题的好方法

我还尝试了css方法，将父类的position:relative和虚线div指定为position:absolute，但没有任何效果。有什么好办法可以做到这一点吗

我为什么这样做？

这里的目标不仅仅是实现虚线边框，而是在滑块的两个幻灯片之间添加自定义div。这个自定义div可以被设置为添加边框，我还想在将来有人单击该div时添加一些额外的选项

edit1:

我尝试了下面的MaxiGui解决方案，到目前为止，除了我的图像之外，我还能够得到虚线div，如下所示：

但是，我只想把这个div放在这个垂直滚动滑块的底部（在所有图像之间的间隙中）

答案如下

---

如果您遇到同样的问题，请参考下面的第一个答案和我的答案，并根据前面的答案进行调整。

根据您的图像，我建议您直接使用图像容器的边框，并将旋转设置为主容器

#图像{
变换：旋转（270度）；
显示器：flex；
}
.图像容器{
右边框样式：虚线；
右边距：10px；
右边填充：10px；
}
img{
最大宽度：150px；
}

---

基于您的图像，我建议您直接在图像容器中使用边框，并在主容器中设置旋转

#图像{
变换：旋转（270度）；
显示器：flex；
}
.图像容器{
右边框样式：虚线；
右边距：10px；
右边填充：10px；
}
img{
最大宽度：150px；
}

---

好吧，如果没有MaxiGui在上面发布的答案的帮助，这是不可能的。因此，根据他的回答，我能够通过做一些小的修复使它工作。如果有人遇到同样的问题，以下是解决方法：

我刚刚在虚线中添加了

absolute

，并给了它100%的宽度。后来我从图像容器中删除了

position:relative

，并将其标记为

unset

.dashed-line{
  position: absolute;
  width: 100%;
  margin-top: -16px;
  border-bottom: 3px dashed #434343;
}

/* image container related */
.image-container {
  width: 90% !important;
  display: flex !important;
  position: unset !important;
  justify-content: center;
}

现在，我可以使用Slick.js将自定义div与边框样式完美地对齐在两张幻灯片的中间空白处

这是最终形式（稍后我将处理边框颜色样式）：

---

谢谢MaxiGui提供的帮助和反馈。

好的，如果没有MaxiGui在上面发布的答案的帮助，这是不可能实现的。因此，根据他的回答，我能够通过做一些小的修复使它工作。如果有人遇到同样的问题，以下是解决方法：

我刚刚在虚线中添加了

absolute

，并给了它100%的宽度。后来我从图像容器中删除了

position:relative

，并将其标记为

unset

.dashed-line{
  position: absolute;
  width: 100%;
  margin-top: -16px;
  border-bottom: 3px dashed #434343;
}

/* image container related */
.image-container {
  width: 90% !important;
  display: flex !important;
  position: unset !important;
  justify-content: center;
}

现在，我可以使用Slick.js将自定义div与边框样式完美地对齐在两张幻灯片的中间空白处

这是最终形式（稍后我将处理边框颜色样式）：

---

感谢MaxiGui提供的帮助和反馈。

您正在搜索

右边框样式：虚线？@MaxiGui no不完全是
边框样式：虚线
。我想在slider上的两个图像之间添加一个div，它可以有自己的边框样式或我给出的任何样式。在上面的例子中，我想应用
边框样式：虚线
@isherwood，我尝试在ngfor循环中的图像容器后添加伪元素，如
：after
，但这会导致样式与图像连成一行。另外，通过使用伪元素，我将失去让用户单击该div并触发该div函数的控制？@MaxiGui no不完全是
边框样式：虚线
。我想在slider上的两个图像之间添加一个div，它可以有自己的边框样式或我给出的任何样式。在上面的例子中，我想应用
边框样式：虚线
@isherwood，我尝试在ngfor循环中的图像容器后添加伪元素，如
：after
，但这会导致样式与图像连成一行。此外，通过使用伪元素，我将失去让用户单击该div并触发该div函数的控制。感谢您的回答，但正如我们在评论部分中所讨论的，我不想将虚线边框样式应用于图像容器，相反，我想添加一个自定义div，它可以用我们自己的自定义方式进一步设置样式。我还更新了我的问题，以便这些信息在其中可见。@Dhruvify查看第二个问题demo@MaxGui屏幕上除了虚线边框外，没有任何东西会断开。Slider和往常一样工作。有现场演示可以试用吗？因为如果它在这里起作用的话，你的眼睛也应该起作用