React-slick - how to change custom arrow colour based on the page number-CodePudding

There are 2 custom arrows which are previous-arrow and next-arrow
There are also total 3 pages with 3 slides per page

What I want to do is whenever the page is the first page/last page, the previous arrow/next arrow will apply filter in svg, which means the previous arrow/next arrow will become black color

      <img
      …
          filter:
            "invert(3%) sepia(7%) saturate(7029%) hue-rotate(94deg) brightness(86%) contrast(93%)"
        }}
      />

For example, if it’s the first page, the previous arrow will be filtered while next arrow will NOT be filtered.

Is it possible to do it?

App.js

import "./styles.css";

import React from "react";
import Slider from "react-slick";

import ArrowPrevious from "./arrow-previous.svg";
import ArrowNext from "./arrow-next.svg";

const ArrowButton = ({ imgSrc, imgAlt, onClick }) => {
  return (
    <button
      onClick={onClick}
      style={{ backgroundColor: "transparent", border: "none" }}
    >
      <img
        src={imgSrc}
        alt={imgAlt}
        style={{
          width: "50px",
          height: "50px",
          filter:
            "invert(3%) sepia(7%) saturate(7029%) hue-rotate(94deg) brightness(86%) contrast(93%)"
        }}
      />
    </button>
  );
};

export default function App() {
  const settings = {
    dots: true,
    infinite: false,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 3,
    prevArrow: <ArrowButton imgSrc={ArrowPrevious} imgAlt="previous-button" />,
    nextArrow: <ArrowButton imgSrc={ArrowNext} imgAlt="next-button" />,
    beforeChange: (current, next) => {
      console.log(next);
    }
  };
  return (
    <div>
      <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>
        <div>
          <h3>7</h3>
        </div>
      </Slider>
    </div>
  );
}

Codesandbox
https://codesandbox.io/s/focused-dubinsky-9onwe?file=/src/App.js

CodePudding user response：

See codesandbox https://codesandbox.io/s/inspiring-austin-k9i86?file=/src/App.js

You just have to look for the onClick !== null

I broke your arrows into 2 separate components though i.e. ArrowButtonNext and ArrowButtonPrevious

CodePudding user response：

I have Checked on Code sandbox and inspect the arrow ,you can change only background Color or else you need to import arrow icon from Material UI or Bootstrap