Estoy tratando de hacer un control deslizante para el componente de mi tarjeta. pero el problema es que no puedo mostrarlos de manera adecuada.
Intenté configurar el ancho del Carousel inner del 100% al 25% , pero eso aumenta la cantidad de páginas en el carrusel y muestra páginas en blanco cuando se agotan los datos de mi API. Quiero recorrer los datos de la API y no quería páginas en blanco adicionales al final del carrusel.
proporcionando el enlace para codesandbox Aquí está el enlace
Para hacer un bucle, puede restablecer el índice activo a 0 nuevamente. Por lo tanto, la función updateIndex debería ser como,
const updateIndex = (newIndex) =>{ if (newIndex < 0 || newIndex >= React.Children.count(children)) { newIndex = 0; } setActiveIndex(newIndex); };Carrusel.js
import React, { useState } from "react"; import "./Carousel.css"; export const CarouselItem = ({ children, width }) => { return ( <div className="carousel-item" style={{ width: width }}> {children} </div> ); }; const Carousel = ({ children }) => { const [activeIndex, setActiveIndex] = useState(0); const updateIndex = (newIndex) => { if (newIndex < 0 || newIndex >= React.Children.count(children)) { newIndex = 0; } setActiveIndex(newIndex); }; return ( <> <div className="carousel"> <div className="inner" style={{ transform: `translateX(-${activeIndex * 100}%)` }} > {React.Children.map(children, (child, index) => { return React.cloneElement(child, { width: "100%" }); })} </div> </div> <div className="indicators"> <button onClick={() => { updateIndex(activeIndex - 1); }} > Prev </button> {React.Children.map(children, (child, index) => { return ( <button onClick={() => { updateIndex(index); }} ></button> ); })} <button onClick={() => { updateIndex(activeIndex + 1); }} > Next </button> </div> </> ); }; export default Carousel;