I'm getting data from the state. Now I want to make a carousel slider using react-multi-carousel
I am trying to implement https://www.npmjs.com/package/react-multi-carousel for a news card component that has data coming from the API. So far my code is as follows, but the carousel does not seem to be implementing?
Child Component
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css'
const responsive = {
superLargeDesktop: {
breakpoint: { max: 4000, min: 3000 },
items: 5
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1
}
};
const size = 15;
const Itemlist = props.data.slice(0, size).map((item,id) => {
return(
<div className="item px-2 col-md-3" key={item.title}>
<div className="alith_latest_trading_img_position_relative">
<figure className="alith_post_thumb">
<Link
to={{
pathname : `/details/${id}`,
}}
>
<img
alt=""
src={item.multimedia ? item.multimedia[0].url : image}
className="w-100 thumbnail"
/>
</Link>
</figure>
<div className="alith_post_title_small">
<Link
to={{
pathname : `/details/${id}`,
}}
><strong>{item.title.length > 30 ? item.title.substring(0,30) + ".." : item.title}</strong>
</Link>
<p className="meta">
<span>{`${moment(item.published_date).fromNow()}`}</span>
</p>
</div>
</div>
</div>
)
})
return (
<React.Fragment>
<Carousel responsive={responsive}>
{Itemlist}
</Carousel>
</React.Fragment>
);
};
Parent Component
state = {
items : []
}
fetchLatestNews = () => {
api.getRealFeed()
.then(response=>{
this.setState({
items : response.data.results
});
})
}
componentDidMount = () => {
this.fetchLatestNews();
}
render(){
return(
<React.Fragment>
<Item data={this.state.items}/>
</React.Fragment>
)}};
I'm not sure if this will help, but I had an issue where the carousel becomes empty when I set the prop infinity to true. Turns out it was because the website I'm working on uses bootstrap rtl.
To fix the issue I just changed the direction of the carousel container to be ltr. Something like this: