如何在 reactjs 项目的 bootstrap 5 中停止在轮播中滑块的最后一张图片上滑动

如何解决如何在 reactjs 项目的 bootstrap 5 中停止在轮播中滑块的最后一张图片上滑动

请在 js 中告诉我，例如如何在 react js 项目中的最后一张图片上停止滑动 这是我的滑块代码，我想删除下一个和上一个图标，并且还想在滑块到达 IMG src={slider5} 时停止滑块。 请帮我找到这个答案

const Slider = () => {
  const prevSlideHandler = () => {
    console.log("clicked");
    notificationmanager.error("You have rejected the image","Rejected!",1000);
  };

  const nextSlideHandler = () => {
 

    notificationmanager.success("You have Liked the image","Success",1000);
  };

  return (
    <section>
      <div
        id="carouselExampleIndicators"
        class="carousel slide"
        data-bs-ride="carousel"
        data-wrap="false"
        data-interval="false"
      >
       
          <div class="carousel-item">
            <img src={slider4} class="d-block w-100" alt="..." />
          </div>

          <div class="carousel-item" id="lastSlider">
            <img src={slider5} class="d-block w-100" alt="..." />
          </div>
          {/* <div class="carousel-item">
            <img src={slider5} class="d-block w-100" alt="..." />
          </div> */}
        </div>
        <button
          class="carousel-control-prev"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="prev"
          onClick={prevSlideHandler}
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">PrevIoUs</span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="next"
          onClick={nextSlideHandler}
        >
          <span
            class="carousel-control-next-icon myarrow"
            aria-hidden="true"
          ></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </section>
  );
};

export default Slider;

解决方法

您应该有一个状态变量，用于跟踪用户在轮播中所在的当前图像，我们称之为“计数器”。单击下一个时增加，单击上一个时减少。

  const prevSlideHandler = () => {
    console.log("clicked");
    NotificationManager.error("You have rejected the image","Rejected!",1000);
    this.setState((state,props) => ({
       counter: state.counter += 1
    }));
  };

  const nextSlideHandler = () => {
 

    NotificationManager.success("You have Liked the image","Success",props) => ({
       counter: state.counter -= 1
    }));
  };

当用户到达图片的末尾时，计数器应等于轮播中图片的数量。发生这种情况时，您应该使用三元运算符隐藏下一个按钮，如下所示：

      {
      counter != [carousel_images].length? 
        <button
          class="carousel-control-next"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="next"
          onClick={nextSlideHandler}
        >
          <span
            class="carousel-control-next-icon myarrow"
            aria-hidden="true"
          ></span>
          <span class="visually-hidden">Next</span>
        </button>
}