I use 'react-grid-carousel' and it perfectly fits my requirements.
However I realized that the demo examples provided by this uses static images.
In my case, I want to load images in Carousel, that I'm fetching using API at runtime.But somehow my images are not placed in carousel.
import React, {useState, useEffect} from 'react'
import axios from 'axios';
import '../styles/Container.css';
import {Link, NavLink} from "react-router-dom";
import Carousel from 'react-grid-carousel'
const ContactCo = (props) => {
const [posts, setPosts] = useState([])
useEffect(() => {
setPosts(props.posts)
},[props.posts])
const renderData = () => {
let x = []
const myData = posts.map((ele) => {
ele.caption.includes("#aboutloeildemelie") && ele.children.data.map((item) => {
x.push(
<>
<div>
<Carousel cols={2} rows={1} gap={10} loop>
<Carousel.Item>
<img className="container_img" src={item.media_url} />
<p className="co_caption" key={ele.id}>{ele.caption.split(' ').slice(1).join(' ')}</p>
</Carousel.Item>
</Carousel>
</div>
</>
)
})
})
return x;
}
return (
<div className="menu_item">
{renderData()}
</div>
)
}
export default ContactCo;