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

【问题标题】：facing problems while adding div between slick.js slides在 slick.js 幻灯片之间添加 div 时遇到问题
【发布时间】：2020-09-29 13:02:49
【问题描述】：

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

(PS 上图是一个以垂直格式实现的滑块的描述。我不习惯 Linux 上的图片编辑工具，所以我从 slick 网站上截取图像并将其垂直旋转来解释我的目的）

上图中的黑色虚线表示自定义 div 带有黑色边框，在两张幻灯片的间隙之间完美实现后，看起来与下图中提到的完全一样：

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

我的代码：

滑块组件.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>

滑块组件.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);
  }

我尝试了什么？

我已尝试阅读 slick 的文档并在 google 上进行了密集浏览，但我找不到任何好的解决方案。

我还尝试了将父类 position: relative 和虚线 div 作为 position: absolute 的 css 方式，但没有任何效果。有什么好的方法可以实现吗？

我为什么要这样做？

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

edit1：

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

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

答案如下

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

【问题讨论】：

您在搜索border-right-style: dashed; 吗？
@MaxiGui 不完全是border-style: dashed。我想在滑块上的两个图像之间添加一个 div，它可以有自己的边框样式或我给出的任何样式。在上述情况下，我想申请border-style: dashed
@isherwood 我尝试在 ngfor 循环中的图像容器之后添加像 :after 这样的伪元素，但这会导致样式与图像保持一致。此外，通过使用伪元素，我将失去让用户点击该 div 并触发相同功能的控制。

标签： html jquery css angular slick.js

【解决方案1】：

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

#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>

【讨论】：

感谢您的回答，但正如我们在 cmets 部分中讨论的那样，我不想仅将虚线边框样式应用于图像容器，而是想添加一个可以进一步设置样式的自定义 div以我们自己的习惯方式。我还更新了我的问题，以便在其中看到这些信息。
@Dhruvify 查看第二个演示
@MaxGui 没有任何中断，但虚线边框完全从屏幕上消失了。滑块照常工作。
有现场演示可以试用吗？因为如果它在这里工作，它也应该由你的代码工作
@MaxGui 当然，我很快就会创建一个现场演示并试一试

【解决方案2】：

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

【讨论】：