0

Сайт на 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", 
            }
        },
        
            
      });

2
  • Это не относится к Вашей конфигурации свайпера. Лично у меня нет той проблемы что Вы описали, но у Вас в принципе есть заметный layout shift, пока не подгрузятся шрифты.
    – Simon
    6 июл в 19:07
  • Но обычно такие вещи происходят когда браузер отображает элементы страницы до того, как CSS или JavaScript полностью загружены и применены к этим элементам. Скорее всего получается что браузер рендерит слайдер перед тем, как Swiper загрузится и будет инициализирован.
    – Simon
    6 июл в 19:19

1 ответ 1

0

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

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

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

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

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

Есть мнения?

1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.