Hice un control deslizante usando carrusel en Trip.js y en Home.Js. He creado una sección de revisión por mí mismo usando useEffect y cada vez que la diapositiva cambia, devuelve valores de profesionales que he enviado en el componente Trip.js desde Home.js. , Cómo representar el valor de los accesorios solo una vez.

 import React, { useRef, memo } from "react"; import Carousel from "react-elastic-carousel"; import Item from "./Item"; import { items } from "./data"; import "./css/home.css"; import { Link } from "react-router-dom"; const Trip = (check) => { const breakPoints = check.c; console.log(breakPoints); const carouselRef = useRef(null); const onNextStart = (currentItem, nextItem) => { if (currentItem.index === nextItem.index) { carouselRef.current.goTo(0); } }; const onPrevStart = (currentItem, nextItem) => { if (currentItem.index === nextItem.index) { carouselRef.current.goTo(items.length); } }; return ( <div className="container"> <Carousel className="carousel-university" breakPoints={breakPoints} ref={carouselRef} onPrevStart={onPrevStart} onNextStart={onNextStart} disableArrowsOnEnd={false} autoPlaySpeed={10000} enableAutoPlay pagination={false} > {items.map((item, index) => ( <Link to={`/trip/${item.title}`}> <div key={item.id}> <Item> <img src={item.image} className="trip-img" alt={item.title} /> </Item> <div className="trip-items-col"> <h3 className="trip-title">{item.title}</h3> <p className="trip-date">{item.starton}</p> </div> </div> </Link> ))} </Carousel> </div> ); }; export default memo(Trip);

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Llamar al componente de viaje en el componente Home.js