Swiper - это библиотека JavaScript, которая питает каждую карусель в Elementor: Image Carousel, Media Carousel и т. д Отзывная карусель, Петля Карусель, и каждая третья сторона Виджет карусели Элементор вы установили. это не функция Elementor. Это библиотека слайдеров с открытым исходным кодом, которую Elementor объединяет.
Знание этого меняет способ отладки сломанной карусели. Когда ползунок перестает работать, проблема почти никогда не в виджете. Дело в том, что Swiper не загружался, не инициализировался и не инициализировался до того, как его контейнер стал шириной.
Быстрое исправление: слайдер перестал работать после обновления плагина
Если вы здесь из-за того, что вдруг умерла работающая карусель, попробуйте это, прежде чем читать что-нибудь еще:
- Откройте плагин кэширования или оптимизации.
- Найдите настройки JavaScript: объедините JS, отложите JS, задержите JS.
- Выключите все три. Очистите кэш. Перезагрузите страницу.
Если карусель вернется, JS-оптимизация сломает ее, и исправление станет исключением, а не исключением оптимизации. Точные исключения дальше вниз.
Что на самом деле делает Swiper
Три вложенных элемента Контейнер, обертка внутри него, и скользит внутрь того, что Свайпер считывает ширину контейнера, вычисляет, насколько переместить обертку для каждого слайда, и применяет CSS преобразование на обертке Слайды никогда не перемещаются индивидуально; вся полоса скользит под окном.
Вот почему доминируют две категории ошибок:
Сценарий не шел. Ничего не инициализируется, поэтому вы видите все слайды сложенными или в ряд без взаимодействия. CSS Swiper обычно все еще здесь, поэтому он выглядит полустильным, а не просто сломанным.
На момент измерения контейнер не имел ширины. Свайпер рассчитан против нуля, поэтому слайды перекрываются, сидят не в том размере или трек прыгает. это ошибка табуляции и аккордеона: карусель внутри скрытой панели измеряет себя, будучи скрытой.
Пять вещей, которые ломают карусели Элементора
1. Комбинация и отсрочка JavaScript
Наиболее распространенная причина с большим отрывом.
Свайпер должен быть определен до запуска встроенного кода инициализации. Объединение файлов переупорядочения JS. Отсрочка переносит выполнение за пределы встроенного вызова. Задержка JS удерживает библиотеку до взаимодействия с пользователем, к этому времени инициализация уже сработала и вышла из строя.
Откройте консоль браузера. Если видите Swiper is not defined или Cannot read properties of undefined, это твоя проблема.
Исправить: исключите ручки-свайперы из оптимизации, а не отключайте их оптом. В кэше LiteSpeed это в разделе "Оптимизация страницы" → "Настройки JS". Добавить:
swiper
elementor-frontend
jquery-coreНа LiteSpeed люди упускают одну вещь: есть отдельные поля исключения и Гостевой режим имеет свой. Если вы заполните только основной ящик JS Excludes, вошедшие в систему пользователи увидят работающую карусель, а вошедшие в систему посетители - нет, что является именно той ошибкой, которая выживает при тестировании, потому что вы вошли в систему во время тестирования. Поместите те же исключения в поле Гостевой режим.
WP Rocket: Оптимизация файлов → Исключенные файлы JavaScript, а также те же строки в разделе "Задержка выполнения JavaScript". Автоптимизация: Extra → Исключить сценарии из автоптимизации.
2. Карусель внутри скрытого контейнера
Карусель в панели с язычком, гармошкой или вне холста инициализируется во время работы панели display: none. Ширина читается как ноль, а математика неверна с первого кадра. Откройте вкладку, и вы получите перекрывающиеся слайды или дорожку, которая не будет двигаться.
Исправить: большинство виджетов раскрывают настройку “observer”.Включите его и Swiper наблюдает за изменением размера и пересчитывает. если ваш нет, поместите карусель в первую вкладку, которая видна при загрузке.
3. Режим цикла со слишком небольшим количеством слайдов
Петля работает путем клонирования слайдов, чтобы имитировать обертку. Чтобы клонировать, ему нужно как минимум вдвое больше слайдов на просмотр. Четыре слайда на просмотре дают видимый прыжок, пустые промежутки или дорожку, которая останавливается на полпути.
Исправить: добавьте слайды или выключите петлю. Нет такой настройки, которая делала бы короткую петлю гладкой.
4. Две версии Swiper на одной странице
Элементор связывает версию; некоторые дополнения объединяют свои собственные. Оба регистрируют один и тот же глобальный. Кто бы ни загружал вторую, тот выигрывает, и если виджет был построен против другого API, он ломается, часто с ошибкой о методе, которого не существует.
Исправить: в консоли, бегите Swiper.version. Затем деактивируйте аддоны по одному, пока они не перестанут меняться. хорошо себя ведущие плагины повторно используют копию Elementor, а не отправляют свою собственную. Сравнение карусельных плагинов отмечает, какие делают.
5. Ленивая загрузка, борьба с ползуном
Агрессивная ленивая загрузка изображений, особенно отдельный плагин ленивой загрузки поверх темы, может оставлять слайд-изображения на нулевой высоте, пока они не прокрутятся в поле зрения. разве что они никогда не прокручиваются в поле зрения, потому что находятся на горизонтальной дорожке. Результат: карусель пустых коробок.
Исправить: исключить класс изображения карусели из плагина lazy-load, либо установить на изображениях явную ширину и высоту, чтобы коробки резервировали место. Видеокарусели ударьте сильнее всего, потому что каждый закадровый слайд несет в себе как проигрыватель, так и изображение.
Как проверить, загружен ли Swiper
Тридцать секунд, и он подскажет вам, какая половина проблемы у вас есть.
- Откройте страницу с разбитой каруселью.
- Откройте консоль браузера (F12 или щелкните правой кнопкой мыши → Inspect → Console).
- Тип
typeof Swiperи нажмите enter.
"function" означает загрузку библиотеки, поэтому ваша проблема - инициализация: посмотрите на скрытые контейнеры или настройки цикла. "undefined" означает, что он так и не пришел, и причина в JS оптимизации или скрипт, который не удался ранее в цепочке. Прокрутите вверх в консоли для первой красной ошибки, а не последней; более поздние ошибки обычно являются последствиями первой.
Настройки Swiper, которые имеют значение в Elementor
Большинство виджетов предоставляют их в разделе "Настройки карусели", иногда с разными метками:
- Слайды на вид: сколько видно; это одна настройка, которая отделяет карусель из ползунка. Устанавливайте всегда для каждой точки останова.
- Слайды для прокрутки: сколько аванса за клик. Установка этого значения равным слайдам на просмотр дает вам пейджинг в стиле страницы; установка его на 1 дает непрерывное ощущение.
- Скорость: продолжительность перехода в мс. 300 на 500 для стандартного, медленнее для 3D.
- Задержка автозапуска: пауза на каждом слайде. Установите на 0, и он станет a шатер, вот как Виджет слайдера логотипа обычно настроен.
- Петля: бесконечная обертка. Требуется достаточно слайдов, как указано выше.
- Автовысота: контейнер соответствует самому высокому видимому слайду. Полезно для неровного текста, и он вводит анимацию высоты, которая может выглядеть неровно, поэтому стоит проверить, а не предполагать.
- Центрированные слайды: активное скольжение располагается в центре, а не заподлицо влево. Необходимо, чтобы покровный поток выглядел вправо.
Где они появляются в бесплатном Изображение Виджет Карусель: изображение карусели прохождение имеет скриншоты панели.
Стоит ли загружать свой собственный Swiper?
Нет, почти в каждом случае. копия Элементора уже есть на странице всякий раз, когда присутствует виджет карусели, а добавление второго вызывает конфликт версий выше.
Исключение - пользовательский слайдер на странице вообще без виджета карусели Elementor Тогда у Elementor Swiper не в очереди и нужен свой. Завещайте условно, только на том шаблоне, так что не везде вводите конфликт заново.
Часто задаваемые вопросы
Что такое Свайпер в Элементоре?
Свайпер - это библиотека слайдеров JavaScript с открытым исходным кодом, которую Elementor использует для всех своих карусельных и слайдерных виджетов. Elementor объединяет его и ставит в очередь всякий раз, когда на странице появляется карусельный виджет. Большинство сторонних карусельных аддонов Elementor используют одну и ту же копию, а не отправляют свою собственную.
Почему мой ползунок Elementor Swiper не работает?
Девять раз из десяти это JavaScript оптимизация от плагина кэширования: комбинировать, откладывать или задерживать JS переупорядочение скриптов так что Swiper не определен, когда код инициализации работает Выключите эти три и перезагрузите Если ползунок возвращается, добавьте swiper, elementor-frontend и jquery-core к исключениям JS плагина вместо того, чтобы оставлять оптимизацию отключенной.
Как исправить “Swiper не определен”?
Библиотека не загружалась до запуска кода инициализации. Исключите swiper из JS, комбинируя, откладывая и задерживая плагин кэша. На LiteSpeed добавьте исключения в поле "Гостевой режим", а также в основное, иначе это работает для вошедших в систему пользователей и прерывает работу для посетителей.
Какую версию Swiper использует Elementor?
Он меняется с выпусками Elementor. проверьте его на любой странице с каруселью, открыв консоль и запустив Swiper.version. Если это возвращает другое число, чем вы ожидаете, аддон загружает свою собственную копию и переопределяет Elementor.
Почему мои слайды перекрываются или складываются друг на друга?
Свайпер измерил контейнер на нулевой ширине, обычно потому, что карусель находится внутри скрытой вкладки, гармошки или всплывающего окна при загрузке страницы. включите настройку наблюдателя, чтобы она пересчитала, когда контейнер станет видимым, или переместите карусель на панель, открытую по умолчанию.
Почему моя карусель работает при входе в систему, но не для посетителей?
Кэширование. вошедшие в систему пользователи обычно обходят кэш и получают неоптимизированные сценарии, поэтому ползунок работает. Посетители получают кэшированную, комбинированную и отложенную версию, и она ломается. Тестируйте в личном окне и проверяйте наличие отдельного гостя или неаутентифицированного списка исключений в своем плагине кэша.
Если все-таки сломано
Работайте в таком порядке: сначала проверьте консоль (typeof Swiper), затем кэш-исключения, затем деактивировать аддоны по одному в промежуточной копии. Эта последовательность находит причину менее чем за десять минут почти для каждого случая.
Дизайны, импортированные через Виджет Строитель используйте ту же сборку Swiper, что и виджеты Stock, поэтому эти исправления применимы и к ним.The страница ценообразования охватывает, кому из двадцати нужна лицензия.
Если лучше начать с чего-то известного-хорошего, каждый карусельный виджет на Виджеты карусели Элементор страницы поставляются с документированными дескрипторами, безопасными для исключения, и Петля Карусельный гид охватывает вариант динамического запроса тех же задач. Если вы выбираете виджет, а не исправляете его, разбивка виджета бесплатной карусели и двадцать шаблонов слайдеров два места для начала.
