Почему next слайд не отображается?

Question

[tgarl]

Слайдер настроен так: отображается центральный слайд и по бокам кусочки от соседних.
Проблема в том, что на некоторых компах правй слайд когда доходишь до посленего не отображается, но нажимаешь кнопку некст и он прогружается и становится в центр. А на некоторых нормально. При этом браузер одинаковый. В режиме разработчика если посмотреть то на одном где не отображается код такой получается

<div class="swiper-wrapper" id="swiper-wrapper-a82cc678106e9d1014" aria-live="off" style="transition-duration: 0ms; transform: translate3d(-3716.27px, 0px, 0px); transition-delay: 0ms;">
   <div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 5" data-swiper-slide-index="1">
      <div class="main-news__swiper-slide">
         <div class="main-news__swiper-image border-radius">
            <a href="/news/info060225/" class="">
               <picture>
                  <source type="image/webp" srcset="/upload/webp/iblock/f22/7x0945hns3t6axpohn184ll0a0uamngh.webp">
                  <img src="/upload/iblock/f22/7x0945hns3t6axpohn184ll0a0uamngh.png" alt="">
               </picture>
            </a>
         </div>
         <h4 class="headline-4 main-news__swiper-title">Подарочный сертификат </h4>
         <a href="/news/info060225/" class="t-navigation link main-news__swiper-link">подробнее</a>
      </div>
   </div>
   <div class="swiper-slide" role="group" aria-label="3 / 5" data-swiper-slide-index="2">
      <div class="main-news__swiper-slide">
         <div class="main-news__swiper-image border-radius">
            <a href="/news/info170125/" class="">
               <picture>
                  <source type="image/webp" srcset="/upload/webp/iblock/99c/zlfxjdf8093nlpjg98vr3l15a15467bt.webp">
                  <img src="/upload/iblock/99c/zlfxjdf8093nlpjg98vr3l15a15467bt.png" alt="">
               </picture>
            </a>
         </div>
         <h4 class="headline-4 main-news__swiper-title">Бельё </h4>
         <a href="/news/info170125/" class="t-navigation link main-news__swiper-link">подробнее</a>
      </div>
   </div>
   <div class="swiper-slide" role="group" aria-label="4 / 5" data-swiper-slide-index="3">
      <div class="main-news__swiper-slide">
         <div class="main-news__swiper-image border-radius">
            <a href="/news/info140125/" class="">
               <picture>
                  <source type="image/webp" srcset="/upload/webp/iblock/1bb/7luojqsz2zfhac0pwaz3i0xvi59t31oz.webp">
                  <img src="/upload/iblock/1bb/7luojqsz2zfhac0pwaz3i0xvi59t31oz.png" alt="">
               </picture>
            </a>
         </div>
         <h4 class="headline-4 main-news__swiper-title">Скидка 15%</h4>
         <a href="/news/info140125/" class="t-navigation link main-news__swiper-link">подробнее</a>
      </div>
   </div>
   <div class="swiper-slide swiper-slide-prev" role="group" aria-label="5 / 5" data-swiper-slide-index="4">
      <div class="main-news__swiper-slide">
         <div class="main-news__swiper-image border-radius">
            <a href="/news/info090125/" class="">
               <picture>
                  <source type="image/webp" srcset="/upload/webp/iblock/457/2rdqrje9l0elaiqqbz6a8wlbt5rfd1v3.webp">
                  <img src="/upload/iblock/457/2rdqrje9l0elaiqqbz6a8wlbt5rfd1v3.png" alt="">
               </picture>
            </a>
         </div>
         <h4 class="headline-4 main-news__swiper-title">Комфортная одежда</h4>
         <a href="/news/info090125/" class="t-navigation link main-news__swiper-link">подробнее</a>
      </div>
   </div>
   <div class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 5" data-swiper-slide-index="0">
      <div class="main-news__swiper-slide">
         <div class="main-news__swiper-image border-radius">
            <a href="/news/info110225/" class="">
               <picture>
                  <source type="image/webp" srcset="/upload/webp/iblock/75e/8htecdy40ig1nsvpdfby9c39t5m842pr.webp">
                  <img src="/upload/iblock/75e/8htecdy40ig1nsvpdfby9c39t5m842pr.png" alt="">
               </picture>
            </a>
         </div>
         <h4 class="headline-4 main-news__swiper-title">Чувственные коллекции</h4>
         <a href="/news/info110225/" class="t-navigation link main-news__swiper-link">подробнее</a>
      </div>
   </div>
</div>

на втором такой

<div class="swiper-wrapper" id="swiper-wrapper-98d603a231d2c7f7" aria-live="off" style="transition-duration: 0ms; transform: translate3d(-3701.79px, 0px, 0px); transition-delay: 0ms;">
   <div class="swiper-slide" role="group" aria-label="3 / 5" data-swiper-slide-index="2">
      <div class="main-news__swiper-slide">
         <div class="main-news__swiper-image border-radius">
            <a href="/news/info170125/" class="">
               <picture>
                  <source type="image/webp" srcset="/upload/webp/iblock/99c/zlfxjdf8093nlpjg98vr3l15a15467bt.webp">
                  <img src="/upload/iblock/99c/zlfxjdf8093nlpjg98vr3l15a15467bt.png" alt="">
               </picture>
            </a>
         </div>
         <h4 class="headline-4 main-news__swiper-title">Бельё – самое удобное и любимое</h4>
         <a href="/news/info170125/" class="t-navigation link main-news__swiper-link">подробнее</a>
      </div>
   </div>
   <div class="swiper-slide" role="group" aria-label="4 / 5" data-swiper-slide-index="3">
      <div class="main-news__swiper-slide">
         <div class="main-news__swiper-image border-radius">
            <a href="/news/info140125/" class="">
               <picture>
                  <source type="image/webp" srcset="/upload/webp/iblock/1bb/7luojqsz2zfhac0pwaz3i0xvi59t31oz.webp">
                  <img src="/upload/iblock/1bb/7luojqsz2zfhac0pwaz3i0xvi59t31oz.png" alt="">
               </picture>
            </a>
         </div>
         <h4 class="headline-4 main-news__swiper-title">Скидка 15%</h4>
         <a href="/news/info140125/" class="t-navigation link main-news__swiper-link">подробнее</a>
      </div>
   </div>
   <div class="swiper-slide swiper-slide-prev" role="group" aria-label="5 / 5" data-swiper-slide-index="4">
      <div class="main-news__swiper-slide">
         <div class="main-news__swiper-image border-radius">
            <a href="/news/info090125/" class="">
               <picture>
                  <source type="image/webp" srcset="/upload/webp/iblock/457/2rdqrje9l0elaiqqbz6a8wlbt5rfd1v3.webp">
                  <img src="/upload/iblock/457/2rdqrje9l0elaiqqbz6a8wlbt5rfd1v3.png" alt="">
               </picture>
            </a>
         </div>
         <h4 class="headline-4 main-news__swiper-title">Комфортная одежда</h4>
         <a href="/news/info090125/" class="t-navigation link main-news__swiper-link">подробнее</a>
      </div>
   </div>
   <div class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 5" data-swiper-slide-index="0">
      <div class="main-news__swiper-slide">
         <div class="main-news__swiper-image border-radius">
            <a href="/news/info110225/" class="">
               <picture>
                  <source type="image/webp" srcset="/upload/webp/iblock/75e/8htecdy40ig1nsvpdfby9c39t5m842pr.webp">
                  <img src="/upload/iblock/75e/8htecdy40ig1nsvpdfby9c39t5m842pr.png" alt="">
               </picture>
            </a>
         </div>
         <h4 class="headline-4 main-news__swiper-title">Чувственные коллекции</h4>
         <a href="/news/info110225/" class="t-navigation link main-news__swiper-link">подробнее</a>
      </div>
   </div>
   <div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 5" data-swiper-slide-index="1">
      <div class="main-news__swiper-slide">
         <div class="main-news__swiper-image border-radius">
            <a href="/news/info060225/" class="">
               <picture>
                  <source type="image/webp" srcset="/upload/webp/iblock/f22/7x0945hns3t6axpohn184ll0a0uamngh.webp">
                  <img src="/upload/iblock/f22/7x0945hns3t6axpohn184ll0a0uamngh.png" alt="">
               </picture>
            </a>
         </div>
         <h4 class="headline-4 main-news__swiper-title">Подарочный сертификат</h4>
         <a href="/news/info060225/" class="t-navigation link main-news__swiper-link">подробнее</a>
      </div>
   </div>
</div>

Comments

[tgarl]

т.е. по коду видно что в одном случае swiper-slide-active стоит на последнем слайде, а в другом случае после активного слайда всегда есть swiper-slide-next.

Версии браузеров одинаковые.

вызов слайдера

new Swiper('.js-main-news-swiper', {
    slidesPerView: 'auto', 
    autoplay: {
        delay: 10000,
        disableOnInteraction: true
    },
    navigation: {
        prevEl: ".main-news__swiper-prev",
        nextEl: ".main-news__swiper-next",
    },
    loop: true,    
  });

[tgarl]

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