I am facing the following problem, where the React Slick slider is not displaying my slides inside the map function. Tried multiple things, but keep getting empty values.
When i hardcode divs it works, but when i try to create them dynamic even when the exist the don't show up.
Can someone help?
My code:
<Slider {...settings}>
{this.props.home.fetched &&
this.props.home.content.map(value => {
return value.acf.slider_extends.map((value, index) => {
return (
<div>
<h1>{value.project_titel}</h1>
<p>{value.project_intro}</p>
<span>{value.video_project}</span>
</div>
);
});
})}
</Slider>
import React, { Component } from 'react';
import Slider from 'react-slick';
class Home extends Component {
constructor() {
super();
this.state = {
sliders: [
'http://img.nowrunning.com/content/movie/2014/Jagga-Jaso/wall_1024x768_01.jpg',
'https://alchetron.com/cdn/Cocktail-2012-film-images-6dbd0ec2-2ea4-47aa-88fd-388cabed7f8.jpg',
'http://media.glamsham.com/download/wallpaper/movies/images/z/zindagi-na-milegi-dobara-wallpaper-03-12x9.jpg']
}
}
sliders() {
return this.state.sliders.map(data => {
return (
<div key={data}>
<img alt="image" src={data} />
</div>
)
});
}
render() {
const settings = {
dots: true,
autoplay: true,
autoplaySpeed: 4000,
arrow: false
}
return (
<div >
<Slider {...settings}>
{this.sliders()}
</Slider>
</div>
);
}
}
export default Home;
如果 Slick 的包含 div 或部分具有属性 flex,则可能导致图片消失。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.