Custom Arrows react-slick

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!

score 24 · Answer 1 · answered Jun 15 '21 at 11:06

24

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>

answered Jun 15 '21 at 11:06

martinedwards

5,577
1
33
35

2

Genius! This helped me right away – RafaelEchart Nov 25 '22 at 00:20
I have tried this , but not working – Lokesh thakur Feb 15 '23 at 05:06

score 15 · Answer 2 · answered Dec 08 '19 at 05:33

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

Oleg · Answer 3 · 2019-09-15T19:59:58.210

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>
    );
  }
}

for some reason first example doesn't work for me - elements not rendered at all when passed through config, going try second one — llamerr, Jan 11 '21 at 12:48

Yasin UYSAL · Answer 4 · 2020-09-09T12:45:00.323

2

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>
    )
}

edited Sep 09 '20 at 12:45

answered Jul 23 '19 at 16:10

Yasin UYSAL

571
6
11

's' is not defined no-undef – Varinder Sohal Sep 08 '20 at 16:22
This is a css module usage example. If you are not using the css module, you can give the class name string. @VarinderSohal – Yasin UYSAL Sep 09 '20 at 12:44

score 0 · Answer 5 · answered Feb 28 '18 at 14:56

0

If anyone tries to achieve the same result, the way to do it is with some css:

.slick-next {
  right: 25px; 
}

answered Feb 28 '18 at 14:56

Aurelie O.F.

119
1
2
7

score 0 · Answer 6 · answered Oct 22 '19 at 05:22

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

score 0 · Answer 7 · answered Dec 03 '19 at 14:04

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;
  }
}

score 0 · Answer 8 · answered Dec 28 '21 at 08:45

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");
    }
   }

score 0 · Answer 9 · answered Feb 09 '22 at 13:00

0

Remember that it is required to add onClick prop to your buttons:

const SlickArrow = ({onClick}: props) => (
  <button onClick={onClick}><Icon.Arrow /></button>
);

answered Feb 09 '22 at 13:00

Erik P_yan

608
5
6

score 0 · Answer 10 · answered Sep 08 '22 at 20:17

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>
  );
};

score 0 · Answer 11 · answered Jan 11 '23 at 07:43

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: "";
}

score 0 · Answer 12 · answered Jan 24 '23 at 12:38

    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

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jan 25 '23 at 07:06

Custom Arrows react-slick

12 Answers12

Linked