React-slick: Custom arrows not in the same row as the slider

[natashache]

I'm trying to add custom arrow components to the slider. But the arrows are showing up not in the same row as the slider. See screen shot below.

Here's my code:

export const RightNavButton = (props) => {
  return (
    <button onClick={props.onClick}  type="button" className="btn btn-default" style={styles.button}>
      <i className="fa fa-3x fa-angle-right" aria-hidden="true" style={{marginLeft: '0px'}}></i>
    </button>
  )
}

export const LeftNavButton = (props) => (
    <button onClick={props.onClick} type="button" className="btn btn-default" style={styles.button}>
      <i className="fa fa-3x fa-angle-left" aria-hidden="true" style={{marginLeft: '0px'}}></i>
    </button>
)

// and then in the slider component: 
this.settings = {
            dots: true,
            nextArrow: <RightNavButton />,
            prevArrow: <LeftNavButton />,
            ...
}

<Slider  {...this.settings}>
   ...
</Slider>

Anybody knows how to make the buttons show up on the same line as the slider? Thanks.

[haohcraft]

You need to pass in the props.className to your className="btn btn-default".

[natashache]

@haohcraft Do you mean the NavButton should return

  return (
    <button onClick={props.onClick}  type="button" props.className="btn btn-default" style={styles.button}>
      <i className="fa fa-3x fa-angle-right" aria-hidden="true" style={{marginLeft: '0px'}}></i>
    </button>
  )

?
Or do you mean in the slider settings it should be

this.settings = {
            dots: true,
            nextArrow: <RightNavButton className="btn btn-default"/>,
            prevArrow: <LeftNavButton />,
            ...
}

and then in the button itself set className = {props.className}?

[Dajust]

You can write a custom style for the arrows. All need you'll do is target the arrows with the classNames react-slick gave them. hope that helps

// css
.slick-arrow{
  display: block;
  position: absolute;
  top: 50%;
  height: 20px;
  width: 20px;
  transform: translateY(-50%); // this takes care of the vertical centering
}
.slick-next{
    right: 0;
}

[feather-aurelie]

Hey - any other solution for that issue? If I add that code, the arrows are not in the viewport anymore...

[laveesingh]

You need to pass props.className to your custom component so that slick styles are applied.
Something like the following should do:

<button onClick={props.onClick} className={`btn btn-default ${props.className}`}>