我剛剛實現了react material ui carousel，它非常簡單，我唯一不明白的是如何隱藏按鈕并只在上方顯示它們。 我注意到了道具navButtonsAlwaysVisible，并將其設置為false，但這還不夠。 我應該為此實現我自己的邏輯嗎，或者也許我只是遺漏了一些東西？

下面是組件代碼:

import styles from '../../styles/Testimonial.module.scss'
import Image from 'next/image'
import Carousel from 'react-material-ui-carousel'

const Testimonial = _ => {
const items = [
        {
            imageUrl: "/png/image0.webp",
            feedback: "feedback0",
            name: "name0",
            location: "location0"
        },
        {
            imageUrl: "/png/image1.jpeg",
            feedback: "feedback1",
            name: "name1",
            location: "location1"
        }
    ]

    return (
        <div id="customers" className={`section ${styles.testimonial}`}>
            <h2 className={`title ${styles.title}`}>Clientes Felizes</h2>
            <span className={"separator"}> </span>

            <Carousel
                className={styles.carousel}
                autoPlay={true}
                stopAutoPlayOnHover={true}
                interval={5000}
                animation={"slide"}
                swipe={true}
                navButtonsAlwaysVisible={false}
                navButtonsProps={{ 
                    style: {
                        backgroundColor: "#8f34eb",
                        opacity: 0.4
                    }
                }} 
            >
                {
                    items.map( (item, i) => <Item key={i} item={item} /> )
                }
            </Carousel>
        </div>
    )
}

function Item(props)
{
    return (
        <article className={styles.testimonial__card}>
            <div className={styles.testimonial__photo_container}>
                <Image
                    className={styles.testimonial__photo}
                    src={props.item.imageUrl}
                    alt="Testimonial"
                    width={312}
                    height={300}
                />
            </div>
            <p className={styles.testimonial__copy}>{props.item.feedback}</p>
            <span className={styles.testimonial__name}>{props.item.name}</span>
            <span className={styles.testimonial__city}>{props.item.location}</span>
        </article>
    )
}

export default Testimonial;

有個道具叫navButtonsAlwaysInvisible

navButtonsAlwaysInvisible={true}

您可以嘗試使用自定義CSS來實現您的目的。基于當前呈現的標記，

.jss6 {
    opacity: 0;
    transition: all ease 1000ms; /* So that it does not disappear quickly */
}

您可以為父容器定義懸停，以便它僅在父容器懸停時顯示:

.jss1.Testimonial_carousel__3rny3:hover .jss6 {
    opacity: 1;
}

現在它是這樣工作的: