nextArrow and prevArrow button not working in react-slick

Question

I am using react-slick in my reactjs application. I am trying to implement next and prev arrows in slider. But this is not working. Here is my code

Here is my "settingss" variable which gets applied to

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,

        }
    }]
}

and here is my slider code.

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>

I am using the guidelines as per documentation. What am I doing wrong?

score 0 · Answer 1 · answered May 22 '18 at 18:49

0

From the docs here: https://react-slick.neostack.com/docs/example/custom-arrows it looks like you should just put the arrows inside of a stateless component and reference them in your settings. The documentation doesn't explain that they're expected to be components instead of DOM nodes and doesn't enforce any prop types.

answered May 22 '18 at 18:49

Michael Nakayama

668
2
8
20

My slider's parent is set to overflow hidden (this is required). Now when I do what the link you shared says, then the arrows are there but are not visible. – EdG May 23 '18 at 09:09
Please add an update to the post that shows the changes you made – Michael Nakayama May 23 '18 at 15:30

nextArrow and prevArrow button not working in react-slick

1 Answers1