尝试使用React Carousel创建项目滑块

Question

这些是我正在使用的两个组件。我想将它们变成一个滑动轮播，就像它是购物车一样，在页面底部有一个建议项目的滑动轮播。这些项目通过axios.get

通过数组拉入

const CartCard = ({name, price, location, description}) => {
    // console.log(props)
    return (
        <Cards>
            <Name>{name}</Name>
            <Price>${price}</Price>
            <Location>{location}</Location>
            <Description>{description}</Description>
        </Cards>
    )
}

export default CartCard;

和

function ShoppingCart() {
    const [data, setData] = useState([])

    useEffect(() => {
        axios.get('https://af-market.herokuapp.com/items')
        .then((response) => {
            setData(response.data)
        })
    }, [])

    console.log(data)

    return (
        <CartContainer>
            {data.map(item => (
                <CartCard
                name={item.name}
                price={item.price}
                location={item.location}
                description={item.description}
            />
            ))}
        </CartContainer>
    )
}

export default ShoppingCart;

I'm trying to make it look like how Amazon suggests items in the shopping cart