如果 React slick 中当前幻灯片之前或之后没有可用的幻灯片，请禁用上一页或下一页按钮。(上一个下一个方法)

Question

我使用了 React slick PrevNextMethod
https://react-slick.neostack.com/docs/example/previous-next-methods

我将“Infinite”设置为 false，因此轮播中不会显示循环。现在，如果当前显示的幻灯片之前没有可用的幻灯片，我想禁用上一个按钮，反之亦然，我想禁用下一个按钮。

官方文档中没有任何选项。有办法实现这个目标吗？

Answer 1

使用自定义箭头，您可以获取自定义箭头组件上的 className 属性，slick-disabled当没有更多幻灯片要显示时，react-slick 将类添加到该箭头，因此考虑到这一点className?.includes("slick-disabled")，您可以检查以下更多详细信息：

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

const NextArrow: React.FC<ArrowsProps> = ({ onClick, className }) => (
  <ArrowRightContainer onClick={onClick} isDisabled={className?.includes("slick-disabled")}>
    <Icon name="chevron-right" />
  </ArrowRightContainer>
);

const PrevArrow: React.FC<ArrowsProps> = ({ onClick, className }) => (
  <ArrowLeftContainer onClick={onClick} isDisabled={className?.includes("slick-disabled")}>
    <Icon name="chevron-right" styles={ArrowLeftIcon} />
  </ArrowLeftContainer>
);


const settings = {
  infinite: false,
  speed: 350,
  slidesToShow: 4,
  slidesToScroll: 1,
  nextArrow: <NextArrow />,
  prevArrow: <PrevArrow />,
};

<Slider {...settings}>
 .....
</Slider>