在 react-slick 中的最后一张幻灯片后禁用滑动

Question

我将 react-slick 用于轮播，并且需要在到达最后一张图片后禁用滑动和拖动幻灯片。我研究并尝试在最后一张幻灯片上设置swipe: false，这可以禁用滑动。但是，当我在倒数第二张幻灯片上滑动到最后一张时，它会转到第一张幻灯片，然后是最后一张幻灯片，然后滑动就会被禁用。

这是我的代码：

  const Home: FC<any> = () => {
  const [index, setIndex] = useState(0);
  const sliderRef = useRef<any>(null)
  const slides = [
    { path: "/images/homeScreen/slider1.png", username: "creatorusername1", userlink: "@instagramusername1" },
    { path: "/images/homeScreen/slider2.png", username: "creatorusername2", userlink: "@instagramusername2" },
    { path: "/images/homeScreen/slider3.png", username: "creatorusername3", userlink: "@instagramusername3" },
    { path: "/images/homeScreen/slider1.png", username: "creatorusername4", userlink: "@instagramusername4" },
    { path: "/images/homeScreen/slider2.png", username: "creatorusername5", userlink: "@instagramusername5" },
    { path: "/images/homeScreen/slider6.png", username: "creatorusername6", userlink: "@instagramusername6" },
  ];

  const beforeChange = (prev: number, next: number) => {
    setIndex(next);
  };

  const settings = {
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 2000,
    infinite: false,
    beforeChange,
    edgeFriction: 1,
    swipe : index !== slides.length - 1
  }

  const next = () => {
    sliderRef.current.slickNext();
  };

  const previous = () => {
    sliderRef.current.slickPrev();
  };
  return (
    <>
      <div>
        <section>
          <div className="main-section text-slider">
            <h1 className="title-fade"><Translator label={index === slides.length -1 ? "Rank the world" : "Join The Chain"} /></h1>
            <h4 className="subtitle-fade"><Translator label="New Trends. New Friends." /></h4>
          </div>
          <div className="home-slider">
            <div className="carousel">
              <Slider {...settings} className="carousel-inner" ref={ref => sliderRef.current = ref}>
                {
                  slides.map((slide: any, index) => (
                    <div className="carousel-item" key={index}>
                      <div className="slide-content">
                        <h3>{slide.username}</h3>
                        <span id="user-icon-link">
                          <Link to="/" target="_blank">
                            <img src="/images/homeScreen/instagram.png" alt="link-icon" width="20" height="20" />{slide.userlink}</Link>
                        </span>
                      </div>
                      <img src={slide.path} alt="Chicago" width="1100" height="500" />
                    </div>
                  ))
                }
              </Slider>
              {((slides.length !== 0) && (index !== slides.length - 1)) &&
                <>
                  {(index !== 0) && <a href="#/" className="carousel-control-prev" onClick={previous}>
                    <img src="/images/homeScreen/skipnewbtn.png" alt="Los Angeles" />
                  </a>}
                  {index !== slides.length - 1 && <a href="#/" className="carousel-control-next" onClick={next}  >
                    <img src="/images/homeScreen/fast-forward-button.gif" alt="Los Angeles" />
                  </a>}
                </>
              }
            </div>
          </div>
        </section>
      </div>
      <Footer />
    </>
  )
}

Answer 1

您可以在下一张幻灯片移动到位后更改您的状态，方法是使用afterChange() 方法：

const afterChange = (index: number) => { setIndex(index); };

如果您仍想在显示最后一张/第一张幻灯片之前删除箭头，您可以跟踪两个状态更改：

const [index, setIndex] = useState(0);
const [nextIndex, setNextIndex] = useState(0);

const afterChange = (index: number) => { setIndex(index); };
const beforeChange = (prev: number, next: number) => { setNextIndex(next); };

...

{(nextIndex !== 0) && 
  <a href="#/" className="carousel-control-prev" onClick={previous}>
    <img src="/images/homeScreen/skipnewbtn.png" alt="Los Angeles" />
  </a>
}
{nextIndex !== slides.length - 1 && 
  <a href="#/" className="carousel-control-next" onClick={next}  >
    <img src="/images/homeScreen/fast-forward-button.gif" alt="Los Angeles" />
  </a>
}

或者，您可以为每个按钮保留一个状态。

const [index, setIndex] = useState(0);
const [showPrevArrow, setShowPrevArrow] = useState(false);
const [showNextArrow, setShowNextArrow] = useState(slides.length > 1);

const afterChange = (index: number) => { setIndex(index); };

const beforeChange = (prev: number, next: number) => { 
  setShowPrevArrow(next > 0);
  setShowNextArrow(next < slides.length - 1);
};

...

{showPrevArrow && 
  <a href="#/" className="carousel-control-prev" onClick={previous}>
    <img src="/images/homeScreen/skipnewbtn.png" alt="Los Angeles" />
  </a>
}
{showNextArrow && 
  <a href="#/" className="carousel-control-next" onClick={next}  >
    <img src="/images/homeScreen/fast-forward-button.gif" alt="Los Angeles" />
  </a>
}

注意：您将不再需要在标记中进行此测试：

((slides.length !== 0) && (index !== slides.length - 1))