How to stop sliding on last image of slider in carousel in bootstrap 5 on a reactjs project

Question

Please tell me in js like how I can stop slide at last image in react js project here is my Slider code and I want to remove the next and prev icons and also want to stop the slider when it reaches to IMG src={slider5}. Please help me in find this answer

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;

Answer 1

You should have a variable in the state that keeps track of the current image the user is on in the carousel, let's call it "counter". It increments when you click next and decrements when you click previous.

  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", 1000);
    this.setState((state, props) => ({
       counter: state.counter -= 1
    }));
  };

When the user reaches the end of the image, the counter should be equal to the number of images in the carousel. When this happens you should hide the next button with a ternary operator like this:

      {
      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>
}