[英]Adding full screen background in react-slick carousel
我正在使用 react-slick 创建一个全屏滑块,但我坚持在背景中添加图像。
我正在使用以下内容。
import image1 from "../assets/bg1.png"
import image2 from "../assets/audit.png"
import image3 from "../assets/logo.png"
const data = [
{
image: image1,
content: {
title: "First Slide",
title2: "balh22",
},
},
{
image: image2,
content: {
title: "Second Slide",
title2: "balh22",
},
},
{
image: image3,
content: {
title: "Third Slide",
title2: "balh22",
},
},
]
const ValueProp = props => {
const slides= () =>
data.map(d => (
<div style={{ backgroundImage: d.image }}>
{/* <img src={d.image} /> */}
<h1>{d.content.title}</h1>
</div>
))
return (
<Slider style={{ height: "100vh" }} autoplay={true} dots={true}>
{slides()}
</Slider>
)
}
我这样做了,但我无法将图像添加到背景中。 数据数组稍后会有多个图像,但现在我只想显示全屏背景图像。
我怎样才能做到这一点?
使用设置:
const settings = {
dots: false,
fade: true,
infinite: true,
speed: 500,
slidesToShow: 1,
arrows: true,
slidesToScroll: 1,
className: "slides"
};
<Slider style={{ height: "100vh" }} {...settings}>
{slides()}
</Slider>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.