如何在 ngx-slick-carousel 中添加带有内容而不是图像的 div

Posted 2023-05-07

【中文标题】如何在 ngx-slick-carousel 中添加带有内容而不是图像的 div

【英文标题】：How to add div with content instead of images in ngx-slick-carousel

【发布时间】：2021-11-21 15:13:20

【问题描述】：

我想在我的 Angular 12 应用程序中添加多个 <div> 和 ngx-slick-carousel 中的内容。目前，它是滑动虚拟图像，我不知道如何用 div 添加/替换图像。

下面是我当前的代码。

app.component.html

<ngx-slick-carousel class="carousel" #slickModal="slick-carousel"
                    [config]="slideConfig" 
                    (init)="slickInit($event)"
                    (breakpoint)="breakpoint($event)"
                    (afterChange)="afterChange($event)"
                    (beforeChange)="beforeChange($event)">
     
     <div ngxSlickItem *ngFor="let slide of slides" class="slide"><img src=" slide.img "  ></div>

</ngx-slick-carousel>

app.component.ts

  slides = [
    img: "https://via.placeholder.com/600.png/021/fff",
    img: "https://via.placeholder.com/600.png/321/fff",
    img: "https://via.placeholder.com/600.png/422/fff",
    img: "https://via.placeholder.com/600.png/654/fff"
  ];
  slideConfig = "slidesToShow": 2, "slidesToScroll": 1;

请帮助我了解如何添加 div 而不是这些图像 URL。

谢谢。

【问题讨论】：

您是否尝试将图像替换为 div..？

@MikeOne 是的，我做到了。这会在此处滑动一个空白区域，但看不到 div 内容。

【参考方案1】：

您可以轻松地在轮播中添加多个div 而不是图像。

例如，添加两个单独的div 并且一次只显示一个。

首先，修改 ts 文件中的 slideConfig 对象，如下所示。

  slideConfig = 
              "slidesToShow": 1, 
              "slidesToScroll": 1, 
              "arrows": false
            ;

其次，在html文件的<ngx-slick-carousel>标签下，需要添加两个单独的ngxSlickItem，而不要提及*ngFor。

 <ngx-slick-carousel 
              class="carousel" 
              #slickModal="slick-carousel" 
              [config]="slideConfig">

      <div ngxSlickItem class="slide">
        <h1>First slide</h1>
      </div>

      <div ngxSlickItem class="slide">
        <h1>First slide 2</h1>
      </div>

 </ngx-slick-carousel>

现在，您还可以通过上一个和下一个按钮进行控制。

<button (click)="slickModal.slickPrev()">Previous</button>
<button (click)="slickModal.slickPause()">Pause</button>

对于两个以上的内容div，只需在div中添加更多ngxSlickItem，并确保slideConfig中的slidesToShow符合您的要求。