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

如何解决在slick.js幻灯片之间添加div时遇到问题

我正在将slick.js与Angular一起使用，并非常努力地添加自定义div，该自定义div在光滑滑块中的每个图像之后都带有虚线边框（需要放置在两个幻灯片的间隙之间）。我正在用垂直滚动实现光滑的滑块，如下所示：

（ PS 上面的图像是以垂直格式实现的滑块的描述。我不习惯在Linux上使用图片编辑工具，所以这就是为什么我从光滑的网站上拍摄图像并垂直旋转以解释原因我的目的）

上图中的黑色虚线表示具有黑色边框的自定义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>

slider-component.component.ts

  private slickSetting = {
    slidesToScroll: 1,slidesToShow: 1,centerMode: true,centerPadding: '50px',arrows: false,dots: false,vertical: true,verticalSwiping: false,draggable: false,};

  private getSlick(): any{
    return $(this.slick.nativeElement);
  }

  private initializeSlick() {
    let slickElement = this.getSlick();
    slickElement.slick(this.slickSetting);
  }

我尝试过什么？

我尝试阅读有关光滑的文档，并在google上进行了集中浏览，但是我找不到任何解决此问题的好方法。

我也尝试了css方式来给父类 position：relative 和虚线div作为 position：absolute ，但是没有任何效果。有什么好的方法可以做到这一点吗？

我为什么要这样做？

此处的目标不是实现纯虚线边框，而是在滑块的两个幻灯片之间添加自定义div。然后可以对该自定义div进行样式设置以添加边框，我还想在以后有人单击该div时添加一些其他选项。

编辑1：

我在下面尝试了MaxiGui解决方案，到目前为止，除了这样的图像外，我还能够获得虚线div：

但是，我只希望将该div放置在此垂直滚动滑块的底部（在所有图像之间的间隙中）。

答案低于

如果您遇到同样的问题，请先参考第一个答案，然后再根据下面的答案对我的下面的答案进行调整。

解决方法

根据您的图片，建议您直接在图片容器上使用边框，然后将旋转设置为主容器

#images{
  transform:rotate(270deg);
  display:flex;
}
.image-container{
  border-right-style: dashed;
  margin-right: 10px;
  padding-right: 10px;
}
img{
  max-width: 150px;
}

<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="https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png"
         class="img-fluid target slick-img"
         [ngStyle]="{'zoom': zoom}"
         alt="image container"
    >
    <!-- dashed ruler after every image slide -->
  </div>
  <div class="item image-container" *ngFor="let data of serverData; let ind = index;"
       id="imageContainer">
    <img (load)="imageLoaded($event.target)"
         src="https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png"
         class="img-fluid target slick-img"
         [ngStyle]="{'zoom': zoom}"
         alt="image container"
    >

  </div>
</div>

div中的破折号代表img：

#images{
  transform:rotate(270deg);
  display:flex;
}
.image-container{
  display:flex;
}

.width-dashed{
  border-right: 3px dashed black;
  margin-right: 10px;
  padding-right: 10px;
}
img{
  max-width: 150px;
}

<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="https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png"
         class="img-fluid target slick-img"
         [ngStyle]="{'zoom': zoom}"
         alt="image container"
    >
    <!-- dashed ruler after every image slide -->
    <div class="width-dashed"></div>

  </div>
  
  <div class="item image-container" *ngFor="let data of serverData; let ind = index;"
       id="imageContainer">
    <img (load)="imageLoaded($event.target)"
         src="https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png"
         class="img-fluid target slick-img"
         [ngStyle]="{'zoom': zoom}"
         alt="image container"
    >
      <!-- dashed ruler after every image slide -->
    <div class="width-dashed"></div>
  </div>
</div>

,

好的，所以没有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的帮助和反馈。