我正在尝试使用 PnP Carousel 控件在 SPFx 中构建一个基本的图像轮播。文档在这里。
我已经根据文档添加了代码,包括导入和依赖项来设置轮播,但是当我使用 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',
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',
title: 'Colosseum',
description: 'This is Colosseum',
url: 'https://en.wikipedia.org/wiki/Colosseum',
showDetailsOnHover: true,
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() 函数,我相信其中的所有内容都应该可以工作,但我不确定其他地方是否需要更改任何其他内容。任何帮助,将不胜感激。