I do have a problem with my webpage in progress. It has a carousel on it an i´ve placed a logo on the slides. But it shouldn´t be visible on any other slide than the first one. So as soon as the Carousel moves into the second position it should be visible until it hits the first slide again. Maybe somebody can help me with that.

<!-- START Carousel/Slider -->
     <div style="text-align: center;">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <img src="Bilder/logo.jpg" style="position: absolute; width: 500px; z-index: 100; float: left; left: 50%; transform: translateX(-50%); margin-top: 0px;">
      <div id="carouselSlide" class="carousel">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselSlide" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselSlide" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselSlide" data-bs-slide-to="2" aria-label="Slide 3"></button>
            <button type="button" data-bs-target="#carouselSlide" data-bs-slide-to="3" aria-label="Slide 4"></button>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active" style="height: 500px;">
              <img src="FirstPic.jpg" class="d-block w-100" alt="First Slide" style="min-height: 500px; object-fit: cover;">
              <div class="carousel-caption d-none d-md-block">
              </div>
            </div>
            <div class="carousel-item" style="height: 500px;">
              <img src="SecondPic.jpg" class="d-block w-100" alt="Second Slide" style="min-height: 500px; object-fit: cover;">
              <div class="carousel-caption d-none d-md-block">
                <h5 style="color: #222222; font-size: 65px; font-weight: bold; width: min-content; text-align: center;">
                  <span>Second Text</span>
                </h5>
                <p></p>
              </div>
            </div>
            <div class="carousel-item" style="height: 500px;">
              <img src="ThirdPic.jpg" class="d-block w-100" alt="Third Slide" style="min-height: 500px; object-fit: cover">
              <div class="carousel-caption d-none d-md-block">
                <h5 style="color: #1f1f1f; font-size: 65px; font-weight: bold; width: min-content; text-align: center;">
                  <span>Third Text</span>
                </h5>
                <p></p>
              </div>
            </div>
            <div class="carousel-item" style="height: 500px;">
              <img src="FourthPic.jpg" class="d-block w-100" alt="Fourth Slide" style="min-height: 500px; object-fit: cover;">
              <div class="carousel-caption d-none d-md-block">
                <h5 style="color: #222222; font-size: 65px; font-weight: bold; width: min-content; text-align: center;">
                  <span>Fourth Text</span>
                </h5>
                <p></p>
              </div>
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselSlide" data-bs-slide="prev">
            <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="#carouselSlide" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
     </div>
    <!-- END Carousel/Slider -->

I kind of tested several things with JS but wasnt successfull yet.