React-slick - 如何根据页码更改自定义箭头颜色答案

【问题标题】：React-slick - how to change custom arrow colour based on the page numberReact-slick - 如何根据页码更改自定义箭头颜色
【发布时间】：2022-01-17 15:47:45
【问题描述】：

有 2 个自定义箭头，分别是上一个箭头和下一个箭头
还有总共 3 页，每页 3 张幻灯片

我想要做的是每当页面是第一页/最后一页时，上一个箭头/下一个箭头将在svg中应用过滤器，这意味着上一个箭头/下一个箭头将变为黑色

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

例如，如果是第一页，则会过滤上一个箭头，而不会过滤下一个箭头。

有可能吗？

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

代码沙盒
https://codesandbox.io/s/focused-dubinsky-9onwe?file=/src/App.js

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

查看代码框 https://codesandbox.io/s/inspiring-austin-k9i86?file=/src/App.js:510-527

您只需寻找onClick !== null

我把你的箭头分成了两个独立的部分，即ArrowButtonNext和ArrowButtonPrevious

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


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

【讨论】：

【解决方案2】：

我已经检查了代码沙箱并检查了箭头，您只能更改背景颜色，否则您需要从 Material UI 或 Bootstrap 导入箭头图标

【讨论】：