'Custom Arrows react-slick
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!
Solution 1:[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
Solution 2:[2]
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>
);
}
}
Solution 3:[3]
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>
Solution 4:[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>
)
}
Solution 5:[5]
If anyone tries to achieve the same result, the way to do it is with some css:
.slick-next {
right: 25px;
}
Solution 6:[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
Solution 7:[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;
}
}
Solution 8:[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");
}
}
Solution 9:[9]
Remember that it is required to add onClick prop to your buttons:
const SlickArrow = ({onClick}: props) => (
<button onClick={onClick}><Icon.Arrow /></button>
);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow