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

Posted 2023-02-22

【中文标题】在 react-material-ui-carousel 中隐藏导航按钮

【英文标题】：Hide nav button in 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
                    
                    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

理想情况下，导航器应该出现在悬停上

【参考方案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;

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