salesforce-lightning - 如何在 Lightning Web 组件中使用轮播请参阅下面的代码 + 需要一些示例示例如何在 lwc 中实现

Question

如何在闪电网络组件中使用轮播。需要一些示例示例如何在 lwc 中实现。

Answer 1

这非常简单，类似于其他 LWC 组件，请找到以下示例代码：

HTML：

<lightning-carousel-image 
    key={myArray.Id} 
    src={myArray.imageURL} 
    href={myArray.pageURL}
>
</lightning-carousel-image>

JS：

export default class MyEvents extends LightningElement {
  @track myArray = [];
  connectedCallback() {
    yourApexMethod()
      .then(result => {
        if (result) {
          this.myArray = result;
          }
        }
      }).catch(error => {

      })
  }

您必须通过将图像 URL 添加到 CSP 受信任站点和远程站点设置来将其列入白名单

Answer 2

这是有关闪电轮播图像的官方文档

https://developer.salesforce.com/docs/component-library/bundle/lightning-carousel-image/documentation

<lightning-carousel>
    <lightning-carousel-image
        src="path/to/carousel-01.jpg"
        header="First card"
        description="First card description"
        alternative-text="This is a card"
        href="https://www.example.com">
    </lightning-carousel-image>

    <lightning-carousel-image
        src="path/to/carousel-02.jpg"
        header="Second card"
        description="Second card description"
        alternative-text="This is a card"
        href="https://www.example.com">
    </lightning-carousel-image>
</lightning-carousel>

另外，也要加入白名单:)