При обновлении страницы в Swiper слайдер10 мигает первый слайд

Рейтинг: 0Ответов: 1Опубликовано: 06.07.2023

Сайт на Wordpress На странице установлен Swiper слайдер 10. На страницу слайдер выводится повторителем ACF Изначально выводится 4 слайда. В момент загрузки/обновления страницы на долю секунды всплывает 1-й слайд на всю ширину слайдера. Затем все приходит в норму. Как избавиться от этого глюка? Страница: https://biz-vip.ru/blago/ Параметры слайдера:

var swiper = new Swiper(".mySwiper", {
        slidesPerView: 4,
        spaceBetween: 10,
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
            breakpoints: {
            // when window width is >= 320px
            320: {
              slidesPerView: 1,
            },
            // when window width is >= 480px
            480: {
              slidesPerView: 1,
            },
            // when window width is >= 640px
            640: {
              slidesPerView: "4", 
            }
        },
        
            
      });

wordpress swiper.js
Источник: Stack Overflow на русском

Ответы

▲ 0

Разбираясь глубже, выяснил следующее:

В файле стилей слайдера изначально задана ширина слайда :100% Этот файл грузится из CDN, и править его возможности нет. В скрипте инициализации слайдера у меня указан вывод на странице 4-х слайдов. Этот скрипт грузится после файла стилей. Поэтому и происходит мигание первого слайда на всю ширину.

Я задал слайдеру opacity: 0. Но добавил скрипт отложенного изменения opacity на 1. Таким образом глюк происходит в скрытом режиме.

    <script>    
      setTimeout(function(){
        document.getElementById('swiper').style.opacity = 1;
      },
      100);
    </script>

Решение , конечно, костыльное, но, по-моему, вполне жизнеспособное, и ни на что не влияющее.

Есть мнения?