在 react-material-ui-carousel 中隐藏导航按钮答案

【问题标题】：Hide nav button in react-material-ui-carousel在 react-material-ui-carousel 中隐藏导航按钮
【发布时间】：2021-05-30 05:25:22
【问题描述】：

我刚刚实现了 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;

【问题讨论】：

自定义 CSS 可以轻松隐藏它，但我需要查看您的输出。
目前它部署在 Meuartelie.com 如果自定义 css 是唯一的方法，我可能会在移动模式下隐藏按钮，这就足够了，因为有一个滑动选项处于活动状态
喜欢这个？ nimb.ws/5Fy7vE
理想情况下，导航器应该出现在悬停上

标签： css reactjs react-material

【解决方案1】：

有一个叫 navButtonsAlwaysInvisible

的道具

navButtonsAlwaysInvisible={true}

【讨论】：

【解决方案2】：

您可以尝试使用自定义 CSS 来达到您的目的。基于当前渲染的标记，

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

您可以为父容器定义悬停，使其仅在父容器悬停时显示：

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

这就是它现在的工作方式：

【讨论】：