nextArrow 和 prevArrow 按钮在 react-slick 中不起作用

Posted 2023-02-25

【中文标题】nextArrow 和 prevArrow 按钮在 react-slick 中不起作用

【英文标题】：nextArrow and prevArrow button not working in react-slick

【发布时间】：2018-05-22 18:41:49

【问题描述】：

我在我的 reactjs 应用程序中使用 react-slick。我正在尝试在滑块中实现下一个和上一个箭头。但这行不通。这是我的代码

这是我应用到的“settingss”变量

var settingss =
    infinite: false,
    slidesToScroll: 1,
    slidesToShow: 3,
    arrows:true,
    prevArrow: document.getElementsByClassName("a-left"),
    nextArrow: document.getElementsByClassName("a-right"),
    variableWidth: false,
    responsive: [
        breakpoint: 920,
        settings: 
            slidesToShow: 1,
            slidesToScroll: 1,
            // arrows: true,

        
    ]

这是我的滑块代码。

return  <div className=`card-item $container_class`>
    <div className="bg">
        <div className="arrows">
            <div className="a-left">
                <span className="fa fa-chevron-left"></span>
            </div>
            <div className="a-right">
                <span className="fa fa-chevron-right"></span>
            </div>
        </div>
        <div className="dp-circle"></div>
        <div className="dp-name">John
            <div className="dp-location">NYC</div>
        </div>
    </div>
    <Slider ...settingss className="fg-items">
        item.activities.map((item1,i)=>
            return <div className="react-inter">
                <div className="img"></div>
                <div className="info">
                    <div className="caption">
                        This is for test
                    </div>
                    <div className="tags">
                        <div className="visual">Visual</div>
                        <div className="visual">Text</div>
                        <div className="visual">Edited</div>
                    </div>
                    <div className="buttons">
                        <div className="tick">
                            <span className="fa fa-check"></span>
                        </div>
                        <div className="cross">
                            <span className="fa fa-times"></span>
                        </div>
                    </div>
                </div>
            </div>
        )
    </Slider>
</div>

我正在使用文档中的指南。我究竟做错了什么？

【参考方案1】：

来自此处的文档：https://react-slick.neostack.com/docs/example/custom-arrows 看起来您应该将箭头放在无状态组件内并在您的设置中引用它们。文档没有说明它们应该是组件而不是 DOM 节点，也没有强制执行任何 prop 类型。

【讨论】：

我的滑块的父级设置为溢出隐藏（这是必需的）。现在当我按照你分享的链接所说的那样做时，箭头在那里但不可见。

请在帖子中添加更新以显示您所做的更改