React-slick: how to custom arrows?

[leeseean]

I want to change the styles of prev button and next button, how to custom?

[firestar300]

Index.js(x)

import React, { Component } from 'react'

import Slider from 'react-slick'

import SliderArrow from '../components/Global/SliderArrow'

class Index extends Component {
  render() {
    const sliderSettings = {
        dots: true,
        infinite: true,
        prevArrow: <SliderArrow to="prev" />,
        nextArrow: <SliderArrow to="next" />,
        slidesToShow: 1,
        slidesToScroll: 1
    }

    return (
      <div className="main">
        <Slider {...sliderSettings}>
           <div>
              <h2>1</h2>
           </div>
           <div>
              <h2>2</h2>
           </div>
           <div>
               <h2>3</h2>
           </div>
        </Slider>
      </div>
    )
  }
}

SliderArrow.js(x)

import React from 'react'

import Icon from './Icon'

export default ({className, to, onClick}) => (
  <button type="button" onClick={onClick} className={`button button--text button--icon ${className}`} aria-label={to}>
    <Icon className="icon" icon={to} />
  </button>
)

[maddhruv]

@leeseean is your issue resolved with the above code?
I am closing this as of now
Feel free to reopen :smile:

[yasin749]

You can try this way

render() {
    const ArrowLeft = (props) => (
        <button
            {...props}
            className={s.prev}/>
    );
    const ArrowRight = (props) => (
        <button
            {...props}
            className={s.next}/>
    );

    const settings = {
        arrows: true,
        prevArrow: <ArrowLeft />,
        nextArrow: <ArrowRight />,
    };

    return (
        <Slider {...settings}>
            {/* items... */}
        </Slider>
    )
}

[ondrejrohon]

imho this should be mentioned in README

[Nikhil-devloper]

try this code it works for me :100:
adjust left-right position's according to your need.

For local Images
.slick-prev:before{
/* background-color: blue !important; */
width: 46px;
height: 46px;
content: '' !important;
position: absolute;
top: -11px;
left: -31px;
background-image: url('../../images/arrow_left.png');
background-repeat: no-repeat;
vertical-align: middle;
background-size: 46px;
opacity: 1 !important;
}

/* Worked for Image present on outside server **/
.slick-prev:before{
/ background-color: blue !important; */
width: 46px;
height: 46px;
content: '' !important;
position: absolute;
top: -11px;
left: -31px;
background-image: url('http://lorempixel.com/50/50');
}

.slick-next:before{
/* background-color: blue !important; */
width: 46px;
height: 46px;
content: '' !important;
position: absolute;
top: -11px;
left: 0px;
background-image: url('http://lorempixel.com/50/50');
}

[mecharmor]

Does the slider render react components??
When I try prevArrow={<FontAwesomeIcon icon={faChevronLeft} />}
the slider will break _(not show any icon)_. but when I use prevArrow={<img src={some_svg} />} it works.

I see that this library itself is a port to the jQuery slick slider so perhaps that is the issue?

[Hahlh]

@mecharmor

You could try to remove the { }:

https://react-slick.neostack.com/docs/example/custom-arrows

[luming63]

hello! Lao Ming.

[ZaidKhan144]

@Nikhil-devloper Thanks man, After so much time tweaking around, your solution works for me.