Question

我在reactjs应用程序中使用react-slick。我试图在滑块中实现next和prev箭头。但这不起作用。这是我的代码

这是我的“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>

我按照文档使用指南。我究竟做错了什么？

Answer 1

从这里的文档：https://react-slick.neostack.com/docs/example/custom-arrows看起来你应该把箭头放在无状态组件中并在你的设置中引用它们。文档没有解释他们预期是组件而不是DOM节点，并且不会强制执行任何道具类型。

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

1 个答案: