Почему сразу не активируется слайдер?

Написал слайдер для сайта, но появилась проблема, он не активируется сразу (смотреть скриншоты), для активации надо нажать на стрелочку, уже перерыл весь код, но все без успешно+не работает анимация(
Вот как он выглядит до активации , а вот как должен
код

<div class="slider">
<div class="item"><a href="index.php/fanera-fk/fanera-fk"><img src="https://i.yapx.ru/D0D4U.png" alt="Первый слайд" /></a></div>
<div class="item"><a href="index.php/fanera-fk/fanera-laminirovannaya"><img src="https://i.yapx.ru/D0D8P.png" alt="Второй слайд" /></a></div>
<div class="item"><a href="index.php/fanera-fk/fanera-fsf"><img src="https://i.yapx.ru/D0DDF.png" alt="Третий слайд" /></a></div>
<div class="item"><a href="index.php/osb-3-kalevala"><img src="https://i.yapx.ru/D0EgJ.png" alt="Четвертый слайд" /></a></div>
<a class="prev" onclick="minusSlide()">❮</a> <a class="next" onclick="plusSlide()">❯</a></div>
<div class="slider-dots"><span class="slider-dots_item" onclick="currentSlide(1)"></span> <span class="slider-dots_item" onclick="currentSlide(2)"></span> <span class="slider-dots_item" onclick="currentSlide(3)"> </span> <span class="slider-dots_item" onclick="currentSlide(4)"> </span></div>

var slideIndex = 1;
showSlides(slideIndex);

/* Функция увеличивает индекс на 1, показывает следующй слайд*/
function plusSlide() {
    showSlides(slideIndex += 1);
}

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

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

/* Основная функция слайдера */
function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("item");
    var dots = document.getElementsByClassName("slider-dots_item");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
}

/* Собственно сам слайдер */
.slider{
  	overflow: hidden;
    max-width: 100%;
    position: relative;
    margin: auto;
    height: 300px;
    margin-bottom: 15px;
}
/* Картинка мастабируется по отношению к родительскому элементу */
.slider .item img {
    object-fit: cover;
    width: 100%;
    height: 300px;
    border: none !important;
    box-shadow: none !important;
}
/* Кнопки вперед и назад */
.slider .prev, .slider .next {
    cursor: pointer;
  	position: absolute;
  	width: auto;
    top: 0;
    top: 50%;
    margin-top: -22px;
    padding: 18px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}
.slider .next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.slider .prev{
 	left: 10px;
}      
      
/* При наведении на кнопки добавляем фон кнопок */
.slider .prev:hover,
.slider .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
/* Заголовок слайда */
.slideText {
    position: absolute;
    color: #fff;
    font-size: 35px;
    /* Выравнивание текста по горизонтали и по вертикали*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Тень*/
    text-shadow: 1px 1px 1px #000, 0 0 1em #000;
}
/* Кружочки */
.slider-dots {
    text-align: center;
}
.slider-dots_item{
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.active,
.slider-dots_item:hover {
    background-color: #aaa;
}
/* Анимация слайдов */
.slider .item {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}
@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}
@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}