Не отображается картинка на слайдере

Не видна картинка на слайдере но при смене слайдов он появляется во время анимации. В чем может быть проблема?

<main class="main">
  <div class="main__slider slider">
    <div class="slider__wrapper">
      <div class="slider__item">
        <img src="img/slide1.jpg" alt="Слайд 1" class="slider__image">
      </div>
      <div class="slider__item">
        <img src="img/slide1.jpg" alt="Слайд 2" class="slider__image">
      </div>
      <div class="slider__item">
        <img src="img/slide3.jpg" alt="Слайд 3" class="slider__image">
      </div>
    </div>
  </div>
</main>

.main {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider__wrapper {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.8s ease;
  transform: translateX(0%);
}


.slider__item {
  flex: 0 0 100%;
  height: 100%;
}

.slider__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}



  $(function () {
    const $wrapper = $('.slider__wrapper');
    const slideCount = $('.slider__item').length;
    let currentIndex = 0;

    function goToSlide(index) {
      const offset = -index * 100 + '%';
      $wrapper.css('transform', 'translateX(' + offset + ')');
    }


    setInterval(function () {
      currentIndex = (currentIndex + 1) % slideCount;
      goToSlide(currentIndex);
    }, 4000); 
  });