如何通过 PNP Carousel Control for SPFx 为图像使用固定网址

如何解决如何通过 PNP Carousel Control for SPFx 为图像使用固定网址

我正在尝试使用 PnP Carousel 控件在 SPFx 中构建一个基本的图像轮播。文档 here.

我根据文档添加了代码，包括用于设置轮播的导入和依赖项，但是当我使用 gulp serve 运行时没有图像出现。我将 contentContainerStyles 注释掉了，因为我还不确定我想要图像的样式。

export default class PnpTest2 extends React.Component<IPnpTest2Props,{}> {
public render(): React.ReactElement<IPnpTest2Props> {
return (
  <div className={ styles.pnpTest2 }>
    <div className={ styles.container }>
      <div className={ styles.row }>
        <div className={ styles.column }>
          <span className={ styles.title }>Carousel Test</span>
          <Carousel
          buttonsLocation={CarouselButtonsLocation.center}
          buttonsdisplay={CarouselButtonsdisplay.buttonsOnly}
          contentContainerStyles={styles.carouselImageContent}
          isInfinite={true}
          indicatorShape={CarouselIndicatorShape.circle}
          pauSEOnHover={true}

          element={[
            {
              imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',title: 'Colosseum',description: 'This is Colosseum',url: 'https://en.wikipedia.org/wiki/Colosseum',showDetailsOnHover: true,imageFit: ImageFit.cover
            },{
              imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',imageFit: ImageFit.cover
            }
          ]}
          onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}
          onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}
        />
        </div>
      </div>
    </div>
  </div>
);
}}

我想我在某处遗漏了一段代码，但我不确定在哪里。下面是我的 .tsx 文件中的 render() 函数，我相信其中的所有内容都应该可以工作，但我不确定其他地方是否需要更改其他内容。任何帮助将不胜感激。

解决方法

在我看来，为此目的最好使用 react-slick 库 （因为它更容易用于此目的。）

import Slider from "react-slick";

const SimpleSlider = ()=>{
    const settings = {
      dots: true,infinite: true,speed: 500,slidesToShow: 1,slidesToScroll: 1
    };
    return (
      <div>
        <h2> Single Item</h2>
        <Slider {...settings}>
          <div>
            <h3>Slide 1</h3>
          </div>
          <div>
            <h3>Slide 2</h3>
          </div>
          <div>
            <h3>Slide 3</h3>
          </div>
          <div>
            <h3>Slide 4</h3>
          </div>
          <div>
            <h3>Slide 5</h3>
          </div>
          <div>
            <h3>Slide 6</h3>
          </div>
        </Slider>
      </div>
    );
  }
}

文档： https://react-slick.neostack.com/

github 仓库： https://github.com/akiran/react-slick

所有示例： https://react-slick.neostack.com/docs/example/simple-slider