Custom Arrows react-slick - carousel

Question

I am using react-slick to create a carousel in my project.
I've read through the documents and tried different things but could not find a way to customize it exactly the way I need... Does anyone knows if there a way to have the nextArrow show on/in front of the image and not on its right?
See image below for desired result:
image
Thanks for your help!

Answer 1

I faced the same problem and have been trying to search for the solutions by following this CustomArrows documentation and some other suggestions but none of them working as what I wanted to (use different icons for the arrow and display the arrow on top of the slides). Then I tried to follow this previousNextMethods documentation, and try to adjust it from there.
index.js
renderArrows = () => {
return (
<div className="slider-arrow">
<ButtonBase
className="arrow-btn prev"
onClick={() => this.slider.slickPrev()}
>
<ArrowLeft />
</ButtonBase>
<ButtonBase
className="arrow-btn next"
onClick={() => this.slider.slickNext()}
>
<ArrowRight />
</ButtonBase>
</div>
);
};
render() {
return (
<div className="App">
<div style={{ position: "relative", marginTop: "2rem" }}>
{this.renderArrows()}
<Slider
ref={c => (this.slider = c)}
dots={true}
arrows={false}
centerMode={true}
slidesToShow={2}
>
<div>
<img src="http://placekitten.com/g/400/200" alt="cat" />
</div>
<div>
<img src="http://placekitten.com/400/200" alt="cat" />
</div>
<div>
<img src="http://placekitten.com/g/400/200" alt="cat" />
</div>
<div>
<img src="http://placekitten.com/400/200" alt="cat" />
</div>
</Slider>
</div>
</div>
);
}
style.css
.App {
font-family: sans-serif;
}
.slider-arrow {
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
}
.arrow-btn {
top: 45%;
}
.next {
float: right;
}
I hope this will help. codesandbox

Answer 2

I tend to disable the arrows and build them myself.
Create a reference
const slider = React.useRef(null);
Attach to the slider
<Slider ref={slider} {...settings}>
Add your buttons wherever you want
<button onClick={() => slider?.current?.slickPrev()}>Prev</button>
<button onClick={() => slider?.current?.slickNext()}>Next</button>

Answer 3

See official documentation
https://react-slick.neostack.com/docs/example/custom-arrows/
https://react-slick.neostack.com/docs/example/previous-next-methods
Code from there:
import React, { Component } from "react";
import Slider from "react-slick";
function SampleNextArrow(props) {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: "block", background: "red" }}
onClick={onClick}
/>
);
}
function SamplePrevArrow(props) {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: "block", background: "green" }}
onClick={onClick}
/>
);
}
export default class CustomArrows extends Component {
render() {
const settings = {
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />
};
return (
<div>
<h2>Custom Arrows</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
}
OR
import React, { Component } from "react";
import Slider from "react-slick";
export default class PreviousNextMethods extends Component {
constructor(props) {
super(props);
this.next = this.next.bind(this);
this.previous = this.previous.bind(this);
}
next() {
this.slider.slickNext();
}
previous() {
this.slider.slickPrev();
}
render() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div>
<h2>Previous and Next methods</h2>
<Slider ref={c => (this.slider = c)} {...settings}>
<div key={1}>
<h3>1</h3>
</div>
<div key={2}>
<h3>2</h3>
</div>
<div key={3}>
<h3>3</h3>
</div>
<div key={4}>
<h3>4</h3>
</div>
<div key={5}>
<h3>5</h3>
</div>
<div key={6}>
<h3>6</h3>
</div>
</Slider>
<div style={{ textAlign: "center" }}>
<button className="button" onClick={this.previous}>
Previous
</button>
<button className="button" onClick={this.next}>
Next
</button>
</div>
</div>
);
}
}

Answer 4

You can try this way
render() {
const ArrowLeft = (props) => (
<button
{...props}
className={'prev'}/>
);
const ArrowRight = (props) => (
<button
{...props}
className={'next'}/>
);
const settings = {
arrows: true,
prevArrow: <ArrowLeft />,
nextArrow: <ArrowRight />,
};
return (
<Slider {...settings}>
{/* items... */}
</Slider>
)
}

Answer 5

If anyone tries to achieve the same result, the way to do it is with some css:
.slick-next {
right: 25px;
}

Answer 6

import React, { Component } from "react";
import Slider from "react-slick";
function SampleNextArrow(props) {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: "block", background: "red" }}
onClick={onClick}
/>
);
}
function SamplePrevArrow(props) {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: "block", background: "green" }}
onClick={onClick}
/>
);
}
export default class CustomArrows extends Component {
render() {
const settings = {
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />
};
return (
<div>
<h2>Custom Arrows</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
}
Check the React-slick Custom Next & Prev buttons here : https://react-slick.neostack.com/docs/example/custom-arrows

Answer 7

Add custom css style
.slick-next {
background: url('./images/next.png') center center no-repeat!important;
&::before {
display: none;
}
}
.slick-prev {
background: url('./images/back.png') center center no-repeat!important;
&::before {
display: none;
}
}

Answer 8

You can build your own arrows and it is mentioned in their documentation like everyone pointed out above.
But if you want to change the images (which mostly would be the case) so what I did was just added 2 lines of code for slider .slick-next:before & .slick-prev:beforeand replaced the content with images. With this you dont need to handle disabling the arrows on last item (which is default). Using the code below just changes your arrows and rest of the behavior remains the same.
See the code below
.some_class .slick-slider {
button.slick-next:before {
content: url("your_image_here.svg");
}
button.slick-prev:before {
content: url("your_image_here.svg");
}
}

Answer 9

Remember that it is required to add onClick prop to your buttons:
const SlickArrow = ({onClick}: props) => (
<button onClick={onClick}><Icon.Arrow /></button>
);

Answer 10

I started with the answer from Oleg above and changed it just a bit to use FontAwesome icons. This method works well to keeps the extra properties from being sent to the FontAwesome components that result in errors such as "React does not recognize the currentSlide prop on a DOM element". Thanks to Oleg for the pattern.
import React from 'react';
import Slider from 'react-slick';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
const SomeComponent: React.FC = (): JSX.Element => {
const NextArrow = (props: any) => {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: 'block' }}
onClick={onClick}
>
<FontAwesomeIcon icon="fa-solid fa-chevron-right" />
</div>
);
};
const PrevArrow = (props: any) => {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: 'block' }}
onClick={onClick}
>
<FontAwesomeIcon icon="fa-solid fa-chevron-left" />
</div>
);
};
const settings = {
// other settings here ...
nextArrow: <NextArrow />,
prevArrow: <PrevArrow />,
// more settings here ...
};
return (
<Slider {...settings}>
{/* inner stuff here */}
</Slider>
);
};

Answer 11

This example replaces the default arrow by another icon
import Slider from "react-slick";
import './Example2.css'
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { FaBeer } from 'react-icons/fa'
function SampleNextArrow(props: any) {
const { className, style, onClick } = props;
return (
<div
className={className}
onClick={onClick}
><FaBeer style={{ ...style, color: "red", fontSize: "30px" }} /></div>
);
}
function SamplePrevArrow(props: any) {
const { className, style, onClick } = props;
return (
<div
className={className}
onClick={onClick}
><FaBeer style={{ ...style, color: "red", fontSize: "30px" }} /></div>
);
}
const Example2 = () => {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />
};
return (
<div className="wrapper">
<h1>example 2</h1>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);
}
export default Example2;
and the css
.slick-arrow.slick-next:before {
content: "";
}
.slick-arrow.slick-prev:before {
content: "";
}

Answer 12

import React from 'react';
import Slider from 'react-slick';
import prevArrow from './prev-arrow.svg';
import nextArrow from './next-arrow.svg';
const SliderCarousel = () => {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: <CustomPrevArrow />,
nextArrow: <CustomNextArrow />
};
return (
<Slider {...settings}>
{/* Slides */}
</Slider>
);
};
const CustomPrevArrow = (props) => {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, width: '50px', height: '50px', backgroundImage: `url(${prevArrow})`}}
onClick={onClick}
/>
);
}
const CustomNextArrow = (props) => {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, width: '50px', height: '50px', backgroundImage: `url(${nextArrow})`}}
onClick={onClick}
/>
);
}
export default SliderCarousel;
You can do like this