как использовать карусель в веб-компоненте Lightning, см. код ниже + нужен образец примера, как реализовать в lwc

как использовать карусель в веб-компоненте Lightning. нужен пример того, как реализовать в lwc.


person bhuvanesh    schedule 29.01.2020    source источник
comment
Нужна идея, как использовать приведенный ниже js в html. react.lightningdesignsystem.com/components/carousel   -  person bhuvanesh    schedule 29.01.2020
comment
Добро пожаловать в SO! Прочтите stackoverflow.com/help/how-to-ask   -  person jasie    schedule 29.01.2020
comment
lightningdesignsystem.com/components/carousel   -  person Majdi Saibi    schedule 28.02.2020


Ответы (2)


это довольно просто, как и другие компоненты 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 и в настройки удаленного сайта

person sunil gupta    schedule 27.02.2020

Вот официальная документация по изображению карусели молнии

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>

Также сделайте белый список :)

person Prashant Kashyap    schedule 03.01.2021