Swiper Effect Focus

English | Русский

Репозиторий на GitHub | Живое демо

Независимый эффект для Swiper: центральный слайд отображается в полном размере, соседние плавно уменьшаются, а расстояние между элементами, к которым применяется трансформация, задаётся только через spaceBetween.

Это независимое расширение, которое не связано с авторами Swiper и не имеет статуса официального плагина. Пакет бесплатный, доступен под лицензией MIT и поддерживается добровольными донатами.

Поддержать разработку

Можно поддержать разработку Swiper Effect Focus донатом на Boosty. Донаты добровольные и помогают развивать проект.

Установка

Установите пакет и его зависимость Swiper в каталоге приложения:

npm install swiper swiper-effect-focus

Локальный запуск и установка

В директории пакета:

cd swiper-effect-focus
npm install
npm run dev

Демо: http://localhost:4175. В нём можно переключать интерфейс между русским и английским, менять масштаб соседних слайдов и расстояние между ними, наблюдая плоский эффект фокуса. В демо также есть ссылка для добровольной поддержки разработки на Boosty.

Для подключения к другому проекту сначала выполните npm run build в директории пакета, затем установите его в проект приложения. Пример предполагает, что каталоги приложения и swiper-effect-focus находятся рядом:

npm install [email protected]
npm install ../swiper-effect-focus

Локальный архив создаётся командой npm run pack:local в releases/. Укажите путь к нему и версию из имени созданного файла:

npm install /path/to/swiper-effect-focus/releases/swiper-effect-focus-<version>.tgz

Подключение

import Swiper from 'swiper';
import EffectFocus from 'swiper-effect-focus';
import 'swiper/css';
import 'swiper-effect-focus/css';

const swiper = new Swiper('.swiper', {
  modules: [EffectFocus],
  effect: 'focus',
  slidesPerView: 'auto',
  spaceBetween: 24,
  focusEffect: {
    scale: 0.85,
  },
});

Также доступен именованный импорт { EffectFocus }. Значение scale должно быть конечным числом больше 0 и не больше 1; по умолчанию используется 0.85.

Для slidesPerView: 'auto' рекомендуется вложенная обёртка .swiper-slide-transform с width: 100% и height: 100%: Swiper измеряет внешний слайд, а эффект изменяет вложенный элемент. Если обёртки нет, трансформация применяется к самому слайду. Пример разметки есть в README.md.

spaceBetween задаёт промежуток между трансформируемыми элементами. Внутренние отступы, тени и размер вложенной карточки могут менять визуальное расстояние между содержимым. Не добавляйте отдельный stretch, gap или внешние отступы для повторной компенсации масштаба.

Модуль включает centeredSlides и watchSlidesProgress. Масштаб меняется по кривой smoothstep; сдвиги компенсируют уменьшение слайдов и сохраняют привязку к центру.

Настройки можно обновить без пересоздания:

swiper.params.focusEffect.scale = 0.9;
swiper.params.spaceBetween = 32;
swiper.update();

Для смены оси используйте swiper.changeDirection(). Вертикальной карусели нужна заданная высота. При переключении LTR/RTL пересоздайте экземпляр.

Структура и проверки

• src/geometry.ts: чистые функции расчёта геометрии.
• src/index.ts: интеграция с жизненным циклом Swiper.
• src/style.css: стили эффекта.
• npm run build: сборка пакета.
• npm test: сборка и тесты Node.
• npm run test:types: проверка TypeScript API.
• npm run test:browser: проверки в браузере.
• npm run check: предусмотренный пакетом набор проверок.
• npm run build:demo: сборка демо для статического хостинга.
• npm run pack:local: локальный архив пакета.

Проверка от 2026-09-13 со Swiper 14.2.0: прошли 9 тестов Node, проверка публичных импортов TypeScript и 24 браузерных теста Chrome с десктопной и мобильной шириной окна (npm run check). Production-сборка демо (npm run build:demo) также прошла.

Swiper 12.0.3 и 12.2.0 проверялись ранее: для каждой версии прошли 9 тестов Node, проверка TypeScript и прежний набор из 15 браузерных тестов Chrome. Даты этих проверок не записаны; 2026-09-13 эти версии повторно не проверялись.

Целевой диапазон: 12.0.3–14.x; промежуточные версии отдельно не проверялись. Safari и Firefox в эту проверку не входили. Во время прежних проверок совместимости стабильной версии 13.x в реестре npm не было. Подробная таблица находится в README.md.

Для повторения проверки временно установите нужную версию, не меняя зависимость в package.json и lockfile:

npm install --no-save --package-lock=false [email protected]
npm run check

Аналогично можно проверить 12.2.0. После проверки восстановите рабочую версию:

npm install --no-save --package-lock=false [email protected]
npm run check

Не поддерживаются cssMode, Virtual Slides, многострочный Grid, centeredSlidesBounds и centerInsufficientSlides.

Лицензия

Исходный код пакета доступен под лицензией MIT. Она разрешает коммерческое использование, изменение и распространение при сохранении уведомления об авторских правах и текста лицензии. Swiper и другие сторонние зависимости сохраняют собственные лицензии; уведомления приведены в THIRD_PARTY_NOTICES.md.

Проект бесплатный, донаты добровольные.

Для размещения в официальном каталоге Swiper требуется договорённость с его владельцами. Пакет туда не отправлялся; переписка с авторами не велась.