Почему в слайдер выдаёт картинки с display (none)?

Question

Danya11 @Danya11

Почему в слайдер выдаёт картинки с display (none)?

Есть страница https://profpartner-rus.ru/price/, тут слайдер который выводит на декстопе (все картинки) и также на адаптиве (все картинки). Я не понимаю в чём проблема, весь код скину ниже. На дэкстопе должно быть 8 картинок, при адаптиве 17 картинок. Подскажите, уже 4 часа мучаюсь, если чутка перепишите код буду благодарен!

<style type="text/css">
.content .inner {
	padding-top: 0px;
	padding-bottom: 0px;
}

	.slider_one{
    max-width: 100%;
    position: relative;
    margin: auto;
}

.slider_one .item_block img {
    object-fit: cover;
    width: 100%;
    height: auto;
}

.slider_one .previous, .slider_one .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;
}
.slider_one .next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.slider_one .previous:hover,
.slider_one .next:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.slider_one .item {
    animation-name: fade;
    animation-duration: 1.5s;
}
@keyframes fade {
    from {
        opacity: 0.4
    }
    to {
        opacity: 1
    }

}

.slider_one_mob {display: none;}

@media (max-width: 480px) {
   .slider_one {display: none;}
   .slider_one_mob {display: block;}
}

</style>
<div class="slider_one">
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_1.png">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_2.png">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_3.png">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_4.png">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_5.png">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_6.png">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_7.png">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_8.png">
  </div>
  <a class="previous" onclick="previousSlide()">&#10094;</a>
  <a class="next" onclick="nextSlide()">&#10095;</a>
</div>

<div class="slider_one slider_one_mob">
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_1_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_2_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_3_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_4_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_5_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_6_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_7_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_8_mob.PNG">
  </div>
    <div class="item_block">
    <img src="/bitrix/images/main/slaid_9_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_10_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_11_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_12_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_13_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_14_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_15_mob.PNG">
  </div>
  <div class="item_block">
    <img src="/bitrix/images/main/slaid_16_mob.PNG">
  </div>
    <div class="item_block">
    <img src="/bitrix/images/main/slaid_17_mob.PNG">
  </div>
  <a class="previous" onclick="previousSlide()">&#10094;</a>
  <a class="next" onclick="nextSlide()">&#10095;</a>
</div>
<script type="text/javascript">
	let slideIndex = 1;
showSlides(slideIndex);

function nextSlide() {
    showSlides(slideIndex += 1);
}

function previousSlide() {
    showSlides(slideIndex -= 1);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    let slides = document.getElementsByClassName("item_block");

    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }

   for (let slide of slides) {
        slide.style.display = "none";
    }
    slides[slideIndex - 1].style.display = "block";
} 
</script>