我正在我的一个反应项目中使用https://www.npmjs.com/package/react-multi-carousel,并且已经实现了它,并且效果很好。
我现在需要像使用另一个程序包的https://codesandbox.io/s/lp602ljjj7一样在轮播上实现文本(图例),但是我需要那种情况,而不是那种包,因为我的需求有所不同(使用nextjs,因此多轮播支持ssr并因此使用它)。
我唯一需要知道的是如何使用react-multi-carousel
在轮播图片上实现图例文本。
我的代码示例:https://codesandbox.io/s/react-multi-carousel-playground-bt3v7
将return语句的结构更改为以下结构。
然后您可以将图例的值存储在图像数组中,并将其值传递给p
标签
const Simple = ({ deviceType }) => {
return (
<Carousel
ssr
partialVisbile
deviceType={deviceType}
itemClass="image-item"
responsive={responsive}
>
{images.slice(0, 5).map((image, index) => {
return (
<div key={index} style={{ position: "relative" }}>
<img
draggable={false}
alt="text"
style={{ width: "100%", height: "100%" }}
src={image}
/>
<p
style={{
position: "absolute",
left: "50%",
bottom: 0,
color: "white",
transform: " translateX(-50%)"
}}
>
Legend:{index}.
</p>
</div>
);
})}
</Carousel>
);
};
export default Simple;
您应该像下面那样更改数组结构。
const images = [
{
image: "https://images.unsplash.com/photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
text: "First image",
}
];
然后在循环内部添加文本并按照我们的方式设置样式!
const Simple = ({ deviceType }) => {
return (
<Carousel
ssr
partialVisbile
deviceType={deviceType}
itemClass="image-item"
responsive={responsive}
>
{images.map(image => {
return (
<div>
<img
draggable={false}
alt="text"
style={{ width: "100%", height: "100%" }}
src={image.image}
/>
{/* Have to style so this should see over the image */}
<span>{image.text}</span>
</div>
);
})}
</Carousel>
);
};