React-slick: How to replace the default Arrow with my custom arrow ?

[aziz-boudi4]

I'm trying to replace the default next/previous arrow with a custom arrow.
I was able to add my custom arrow but the default one is still showing on the screen.

How can I get rid of the custom arrow ?

I initially tried to increase the size of the custom but I couldn't that is why I opted to add my custom arrow instead .

So basically either solutions would work for me,
1- How can I increase the size of the default arrow ?
Or
2- How can I use my custom arrow instead of the default arrow ? How to remove the default arrow and use my icon instead ?

Here is how I'm adding my custom icon:

    var NextArrow = React.createClass({
         render: function() {
           return <button {...this.props}   style={{fontSize: "40px", display: 'block', right:"100px", zIndex:"15", height:"40px", width:"40px", opacity:"1", color:"White"}} >
            <span className="icon icon-chevron-with-circle-right"></span>
         </button> ;

}

});

[akiran]

Check this example
https://github.com/akiran/react-slick/blob/master/examples/CustomArrows.js

[aziz-boudi4]

@akiran Thanks for your answer, but I already checked this example.
This is the example that I followed and the code in the example creates my problem.
If I follow the example you have sent me, I'll end up with the small default arrow, and I want to get rid of it and replace it with my custom arrow.

Or let me know how I can increase its size, I was able to change many of it's css property but I cannot change it's size.

Thank you

[angieyu]

this works for me, i replaced the className with "slick-arrow"

function LeftNavButton(props) {
    const {className, style, onClick} = props
    return (
        <div
            className="slick-arrow"
            style={{...style, display: 'block'}}
            onClick={onClick}
        >
            <img src={ARROW_left} alt="arrow_left"/>
        </div>
    );
}

[MasterChenGitHub]

:global {
.slick-prev:before, .slick-next:before {
display: none;
}

}

[limatheusm]

this works for me

const SamplePrevArrow = (props) => {
    const { className, onClick } = props
    return (
        <div 
            className={className}
            onClick={onClick}
        >
            <FontAwesomeIcon
                icon={Icons.faAngleLeft}
                color="#000"
                size="2x"
            />
        </div>
    );
}

.slick-prev, .slick-next {
  font-size: 15px !important;
}

 .slick-prev:before, .slick-next:before  {
  content: '' !important;
}

[hypeofpipe]

Is there a better solution? Looks terrible :/

[hypeofpipe]

This helped me:

import React from 'react';
import styled from 'styled-components';
import Slider, { Settings } from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const settings: Settings = {
  dots: false,
  infinite: true,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 4,
  prevArrow: <EmptyButton />,
  nextArrow: <NavButton />,
};

//insert your CSS below
const StyledSlider = styled(Slider)`
  .slick-next {
    width: 4rem;
    height: 4rem;
    right: -5.4rem;
    top: 40%;
  }
`

<StyledSlider  {...settings}>...;

[toilahungvn98]

I'm using styled-components :

import styled from 'styled-components';

const Dots = styled.div`
/* background-color: red; */
&.slick-dots li button::before {
font-size: 12px;

}

`;

const NextArrow = styled.div`

display: block;
position: relative;


&.slick-next::before {
  content: '';
  position : absolute;
  top: -50%;
  width: 3rem;
  height: 3px;
  transform: rotate(45deg);
  background-color: rgba(0,0,0,0.8);
  transition: all 0.2s;
}
&.slick-next::after {
  content: '';
  top: 50%;
  position : absolute;
  width: 3rem;
  height: 3px;
  transform: rotate(-45deg);
  background-color: rgba(0,0,0,0.8);
  transition: all 0.2s;
}
&.slick-next:hover::before {
  top: -40%;
  transform: rotate(35deg);
}
&.slick-next:hover::after {
  top: 40%;
  transform: rotate(-35deg);
}

`;

const PrevArrow = styled.div`

display: block;
position: relative;
transform: rotate(360deg);

&.slick-prev::before {
  content: '';
  position : absolute;
  top: -50%;
  width: 3rem;
  height: 3px;
  transform: rotate(-45deg);
  background-color: rgba(0,0,0,0.8);
  transition: all 0.2s;
}
&.slick-prev::after {
  content: '';
  top: 50%;
  position : absolute;
  width: 3rem;
  height: 3px;
  transform: rotate(45deg);
  background-color: rgba(0,0,0,0.8);
  transition: all 0.2s;
}
&.slick-prev:hover::before {
  top: -40%;
  transform: rotate(-35deg);
}
&.slick-prev:hover::after {
  top: 40%;
  transform: rotate(35deg);
}

`;

function SampleNextArrow(props) {
const { className, onClick } = props;

return (
className={className}
onClick={onClick}

);
}

function SamplePrevArrow(props) {
const { className, onClick } = props;
return (
className={className}
onClick={onClick}

);
}

[hieunguyendut]

@toilahungvn98 thanks a lot. That worked for me.

[akifarhan]

I'm using styled-components :

import styled from 'styled-components';

const Dots = styled.div`
/* background-color: red; */
&.slick-dots li button::before {
font-size: 12px;

}

`;

const NextArrow = styled.div`

display: block;
position: relative;


&.slick-next::before {
  content: '';
  position : absolute;
  top: -50%;
  width: 3rem;
  height: 3px;
  transform: rotate(45deg);
  background-color: rgba(0,0,0,0.8);
  transition: all 0.2s;
}
&.slick-next::after {
  content: '';
  top: 50%;
  position : absolute;
  width: 3rem;
  height: 3px;
  transform: rotate(-45deg);
  background-color: rgba(0,0,0,0.8);
  transition: all 0.2s;
}
&.slick-next:hover::before {
  top: -40%;
  transform: rotate(35deg);
}
&.slick-next:hover::after {
  top: 40%;
  transform: rotate(-35deg);
}

`;

const PrevArrow = styled.div`

display: block;
position: relative;
transform: rotate(360deg);

&.slick-prev::before {
  content: '';
  position : absolute;
  top: -50%;
  width: 3rem;
  height: 3px;
  transform: rotate(-45deg);
  background-color: rgba(0,0,0,0.8);
  transition: all 0.2s;
}
&.slick-prev::after {
  content: '';
  top: 50%;
  position : absolute;
  width: 3rem;
  height: 3px;
  transform: rotate(45deg);
  background-color: rgba(0,0,0,0.8);
  transition: all 0.2s;
}
&.slick-prev:hover::before {
  top: -40%;
  transform: rotate(-35deg);
}
&.slick-prev:hover::after {
  top: 40%;
  transform: rotate(35deg);
}

`;

function SampleNextArrow(props) {
const { className, onClick } = props;

return (

);
}

function SamplePrevArrow(props) {
const { className, onClick } = props;
return (

);
}

Hi @toilahungvn98, do you have any example of the full code? Im kinda lost on how you use the NextArrow, PrevArrow and Dots. Thank you in advance.

[ariq2901]

this works for me

const SamplePrevArrow = (props) => {
    const { className, onClick } = props
    return (
        <div 
            className={className}
            onClick={onClick}
        >
            <FontAwesomeIcon
                icon={Icons.faAngleLeft}
                color="#000"
                size="2x"
            />
        </div>
    );
}

.slick-prev, .slick-next {
  font-size: 15px !important;
}

 .slick-prev:before, .slick-next:before  {
  content: '' !important;
}

Thank you for the reference. Its work Perfectly!