В слайдере на JS при первой загрузке страницы отображаются все слайды

Взяла слайдер из примеров в сети. Код здесь: https://codepen.io/atesinde/pen/zYRRGGx

    <!-- Слайдер с фотографиями -->
    <!-- Основной блок слайдера -->
    <div class="ural-photo-slider">
        
    <!-- Первый слайд -->
    <div class="item">
    <img src="https://s3.tproger.ru/uploads/2020/07/field.jpg">
    </div>
        
    <!-- Второй слайд -->
    <div class="item">
    <img src="https://s3.tproger.ru/uploads/2020/07/rose.jpg">
    </div>
        
    <!-- Третий слайд -->
    <div class="item">
    <img src="https://s3.tproger.ru/uploads/2020/07/leaf.jpg">
    </div>
        
    <!-- Кнопки-стрелочки -->
    <a class="previous" onclick="previousSlide()">&#10094;</a>
    <a class="next" onclick="nextSlide()">&#10095;</a>
          
    </div>

    <!-- Слайдер с фотографиями -->

    /* Слайдер с фотографиями разных лет */

    /* Слайдер */
   .ural-photo-slider{
        position: relative;
        float: left;
        width: 400px;
        margin: auto;
        height: 290px;
        margin-right: 20px;
        border: 1px solid #222977;    
    }
    /* Картинка масштабируется по отношению к родительскому элементу */
    .ural-photo-slider .item img {
        object-fit: cover;
        width: 100%;
        height: 290px;
    }
    /* Кнопки вперед и назад */
    .ural-photo-slider .previous, .ural-photo-slider .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        color: white;
        font-weight: bold;
        font-size: 16px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
    }
    .ural-photo-slider .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }
    /* При наведении на кнопки добавляем фон кнопок */
    .ural-photo-slider .previous:hover,
    .ural-photo-slider .next:hover {
        background-color: rgba(0, 0, 0, 0.2);
    }
    /* Анимация слайдов */
    .ural-photo-slider .item {
        animation-name: fade;
        animation-duration: 1.5s;
    }
    @keyframes fade {
        from {
            opacity: 0.4
        }
        to {
            opacity: 1
        }
    }

    /* Слайдер с фотографиями разных лет */ 

   /* Устанавливаем индекс слайда по умолчанию */
   let slideIndex = 1;
   showSlides(slideIndex);

   /* Увеличиваем индекс на 1 — показываем следующий слайд*/
   function nextSlide() {
       showSlides(slideIndex += 1);
   }

   /* Уменьшает индекс на 1 — показываем предыдущий слайд*/
   function previousSlide() {
       showSlides(slideIndex -= 1);  
   }

   /* Устанавливаем текущий слайд */
   function currentSlide(n) {
       showSlides(slideIndex = n);
   }

   /* Функция перелистывания */
   function showSlides(n) {
       let i;
       let slides = document.getElementsByClassName("item");
   
       if (n > slides.length) {
         slideIndex = 1
       }
       if (n < 1) {
           slideIndex = slides.length
       }
 
   /* Проходим по каждому слайду в цикле for */
   for (let slide of slides) {
       slide.style.display = "none";
       }   
       slides[slideIndex - 1].style.display = "block"; 
   }     

При первой загрузке страницы показываются все слайды друг под другом, при нажатии на стрелочки всё оказывается на месте. В CodePen всё отображается корректно.

Что делать?

Заранее спасибо.