Uso 'react-grid-carousel' y se ajusta perfectamente a mis requisitos.
Sin embargo, me di cuenta de que los ejemplos de demostración proporcionados por esto usan imágenes estáticas.
En mi caso, quiero cargar imágenes en Carrusel, que estoy obteniendo mediante API en tiempo de ejecución. Pero de alguna manera mis imágenes no se colocan en carrusel.
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;