Объект с параметрами a11y или логическийtrueдля включения с настройками по умолчанию.

const swiper = new Swiper('.swiper', {
  a11y: {
    prevSlideMessage: 'Previous slide',
    nextSlideMessage: 'Next slide',
  },
});

Установите значениеfalseдля отключения перехода к следующему направлению (вправо или вниз)

Установите значениеfalseдля отключения перехода к предыдущему направлению скольжения (влево или вверх)

Еслиfalse, то единственный способ переключиться на другой слайд — использовать внешние функции API, такие как slidePrev или slideNext

Задайте значениеtrueи обёртка слайдера будет подстраивать свою высоту под высоту активного слайда

Объект с параметрами автозапуска или логическим значениемtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
 autoplay: {
   delay: 5000,
 },
});

Позволяет задавать разные параметры для разных точек останова (размеров экрана). Не все параметры можно изменить в точках останова, только те, которые не требуют другого макета и логики, напримерslidesPerView,slidesPerGroup,spaceBetween,grid.rows. Такие параметры, какloopиeffectне будут работать

const swiper = new Swiper('.swiper', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

const swiper = new Swiper('.swiper', {
  slidesPerView: 1,
  spaceBetween: 10,
  // using "ratio" endpoints
  breakpoints: {
    '@0.75': {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    '@1.00': {
      slidesPerView: 3,
      spaceBetween: 40,
    },
    '@1.50': {
      slidesPerView: 4,
      spaceBetween: 50,
    },
  }
});

База для точек останова (бета-версия). Может бытьwindowилиcontainer. Если установлено значениеwindow(по умолчанию), то клавиши точек останова означают ширину окна. Если установлено значениеcontainer, то клавиши точек останова рассматриваются как ширина контейнера свипера

Объект с картами-параметры эффекта

const swiper = new Swiper('.swiper', {
  effect: 'cards',
  cardsEffect: {
    // ...
  },
});

Если этот параметр включен, слайды центрируются, если количество слайдов меньшеslidesPerView. Не предназначено для использования в режимеloopиgrid.rows

Еслиtrue, то активное слайд-шоу будет отображаться по центру, а не всегда слева.

Еслиtrue, то активный слайд будет центрирован без добавления пробелов в начале и в конце слайдера. ТребуетсяcenteredSlides: true. Не предназначено для использования сloopилиpagination

Начало CSS-класса модификатора, который можно добавить в контейнер Swiper в зависимости от различных параметров

Объект с параметрами контроллера или логическим значениемtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
  controller: {
    inverse: true,
  },
});

Объект с параметрами эффекта Coverflow.

const swiper = new Swiper('.swiper', {
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
  },
});

При включении Swiper автоматически обернет слайды элементом swiper-wrapper и создаст необходимые элементы для навигации, разбивки на страницы и полосы прокрутки, если они включены (с соответствующим объектом параметров или с логическим значениемtrue))

Объект с параметрами креативного эффекта

const swiper = new Swiper('.swiper', {
  effect: 'creative',
  creativeEffect: {
    prev: {
      // will set `translateZ(-400px)` on previous slides
      translate: [0, 0, -400],
    },
    next: {
      // will set `translateX(100%)` on next slides
      translate: ['100%', 0, 0],
    },
  },
});

При включении он будет использовать современный CSS Scroll Snap API. Он поддерживает не все функции Swiper, но потенциально может значительно повысить производительность в простых конфигурациях.

Это то, что не поддерживается, когда оно включено:

• Эффект куба
• speedпараметр может не иметь никакого эффекта
• Все события, связанные с началом / завершением перехода (используйтеslideChangeвместо этого)
• slidesPerGroupимеет ограниченную поддержку
• simulateTouchне имеет эффекта, а «перетаскивание» с помощью мыши не работает
• resistanceне имеет никакого эффекта
• allowSlidePrev/Next
• swipeHandler

Если вы используете его с другими эффектами, особенно с 3D-эффектами, необходимо обернуть содержимое слайда элементом<div className="swiper-slide-transform">. И если вы используете какие-либо пользовательские стили для слайдов (например, цвета фона, радиус границы, границу и т. д.), их следует задавать для элементаswiper-slide-transform.

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- wrap slide content with transform element -->
      <div class="swiper-slide-transform">
        ... slide content ...
      </div>
    </div>
    ...
  </div>
</div>
<script>
const swiper = new Swiper('.swiper', {
   effect: 'flip',
   cssMode: true,
 });
</script>

Объект с параметрами кубического эффекта

const swiper = new Swiper('.swiper', {
  effect: 'cube',
  cubeEffect: {
    slideShadows: false,
  },
});

Может быть'horizontal'или'vertical'(для вертикального слайдера).

Включите события Swiper для работы с возвратом свайпом в приложении. Если установлено значение'prevent', то вместо этого будет предотвращаться системная навигация с возвратом свайпом. Эта функция работает только с событиями «касания» (а не с событиями указателя), поэтому она будет работать на устройствах iOS/Android и не будет работать на устройствах Windows с событиями указателя (касания).

Область (в пикселях) от левого края экрана для отпускания сенсорных событий при свайпе назад в приложении

Эффект перехода. Может быть'slide','fade','cube''coverflow','flip''creative',,,,, или'cards'

Независимо от того, был ли Swiper изначально включен. Если Swiper отключен, он скроет все элементы навигации и не будет реагировать на какие-либо события и взаимодействия

Префикс имени события для всех событий DOM, генерируемых элементом Swiper (веб-компонентом)

Объект с параметрами эффекта затухания

const swiper = new Swiper('.swiper', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },
});

Объект с параметрами эффекта переворота

const swiper = new Swiper('.swiper', {
  effect: 'flip',
  flipEffect: {
    slideShadows: false,
  },
});

Селектор CSS для элементов, на которые можно навести курсор. Свайпинг будет отключен для таких элементов, если они «наведены»

Если функция отключена, то ползунок будет анимироваться только при отпускании, он не будет двигаться, пока вы удерживаете на нём палец

Включает функции бесплатного режима. Объект с параметрами бесплатного режима или логическое значениеtrueдля включения с настройками по умолчанию.

const swiper = new Swiper('.swiper', {
  freeMode: true,
});

const swiper = new Swiper('.swiper', {
  freeMode: {
    enabled: true,
    sticky: true,
  },
});

Эта опция может немного улучшить удобство использования Swiper на компьютере. Еслиtrue, пользователь увидит курсор «захвата» при наведении на Swiper

Объект с параметрами сетки для включения ползунка «многострочный».

const swiper = new Swiper('.swiper', {
  grid: {
    rows: 2,
  },
});

Включает навигацию по хэш-ссылкам для слайдов. Объект с параметрами хэш-навигации или логическое значениеtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
  hashNavigation: {
    replaceState: true,
  },
});

Высота Swiper (в пикселях). Параметр позволяет задать высоту Swiper. Полезно только в том случае, если вы инициализируете Swiper, когда он скрыт, а также в средах SSR и Test для правильной инициализации Swiper

Установка этого параметра приведет к тому, что Swiper перестанет реагировать

Включает функцию сохранения состояния истории, при которой у каждого слайда будет свой URL-адрес. В этом параметре необходимо указать URL-адрес основного слайда, например"slides"и указать URL-адрес каждого слайда с помощью атрибутаdata-history.

Объект с параметрами навигации по истории или логическим значениемtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
  history: {
    replaceState: true,
  },
});

<!-- will produce "slides/slide1" url in browser history -->
<div class="swiper-slide" data-history="slide1"></div>

Следует ли инициализировать Swiper автоматически при создании экземпляра. Если эта функция отключена, то вам нужно инициализировать Swiper вручную, вызвавswiper.init()

Порядковый номер начального слайда.

Внедрите стили текста в теневой DOM. Только для использования с элементом Swiper

Внедрите стили<link>в теневой DOM. Только для использования с элементом Swiper

Позволяет перемещаться по слайдам с помощью клавиатуры. Объект с параметрами клавиатуры или логическое значениеtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
  keyboard: {
    enabled: true,
    onlyInViewport: false,
  },
});

Количество следующих и предыдущих слайдов для предварительной загрузки. Применимо только при использовании отложенной загрузки.

Имя CSS-класса ленивого предварительного загрузчика

Установите значениеfalse, если вы хотите отключить длинные прокрутки

Минимальная продолжительность (в миллисекундах) для перехода к следующему/предыдущему слайду при длительном смахивании

Соотношение для перехода к следующему / предыдущему слайду при длительном пролистывании

Установите значениеtrue, чтобы включить режим непрерывного цикла

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

• больше или равноslidesPerView+slidesPerGroup
• даже дляslidesPerGroup(или использоватьloopAddBlankSlidesпараметр)
• даже дляgrid.rows(или использоватьloopAddBlankSlidesпараметр)

Автоматически добавляет пустые слайды, если вы используете сетку илиslidesPerGroupи общее количество слайдов не равноslidesPerGroupилиgrid.rows

Позволяет увеличить количество закольцованных слайдов

Если эта функция включена, то кнопки «Далее» и «Назад» не будут работать, пока слайдер анимируется в режиме цикла

Если общее количество слайдов меньше указанного здесь значения, то Swiper включитbackface-visibility: hiddenна элементах слайдов, чтобы уменьшить визуальное «мерцание» в Safari.

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

Массив с модулями Swiper

import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';

const swiper = new Swiper('.swiper', {
   modules: [ Navigation, Pagination ],
 });

Позволяет перемещаться по слайдам с помощью колёсика мыши. Объект с параметрами колёсика мыши или логическое значениеtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
  mousewheel: {
    invert: true,
  },
});

Объект с параметрами навигации или логическим значениемtrueдля включения с настройками по умолчанию.

const swiper = new Swiper('.swiper', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

Установитеtrueна Swiper для корректного перехвата событий касания. Используйте только на свиперах, которые используют то же направление, что и родительский элемент

Включать / отключать прокрутку элементов, соответствующих классу, указанному вnoSwipingClass

УкажитеnoSwipingcss-класс элемента

Может использоваться вместоnoSwipingClassдля указания элементов, для которых нужно отключить свайп. Например,'input'отключит свайп для всех входов

Нормализует индекс слайда.

Установите значениеtrueесли вам также нужно отслеживать изменения родительских элементов Swiper

Установите значениеtrueесли вам также нужно отслеживать изменения для дочерних элементов слайдов Swiper

Задайте значениеtrueдля включения наблюдателя за изменениями в Swiper и его элементах. В этом случае Swiper будет обновляться (перезапускаться) каждый раз, когда вы меняете его стиль (например, скрываете/отображаете) или изменяете дочерние элементы (например, добавляете/удаляете слайды)

Регистрация обработчиков событий

Добавьте прослушиватель событий, который будет запускаться при всех событиях

const swiper = new Swiper('.swiper', {
   onAny(eventName, ...args) {
     console.log('Event: ', eventName);
     console.log('Event data: ', args);
   }
 });

Если эта функция включена, слайды будут прокручиваться только вперёд (в одну сторону) независимо от направления прокрутки

Объект с параметрами разбивки на страницы или логическим значениемtrueдля включения с настройками по умолчанию.

const swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
});

Объект с параметрами параллакса или booleantrueдля включения с настройками по умолчанию.

const swiper = new Swiper('.swiper', {
  parallax: true,
});

По умолчанию для повышения производительности прокрутки на мобильных устройствах будут использоваться пассивные слушатели событий. Но если вам нужно использоватьe.preventDefaultи у вас возникает конфликт с ним, то вам следует отключить этот параметр

Установите значениеtrueдля предотвращения случайных нежелательных переходов по ссылкам во время прокрутки

Установите значениеtrue, чтобы остановить распространение событий кликов по ссылкам во время прокрутки

Если эта функция включена, она не позволит менять слайды с помощью свайпа или кнопок навигации/пагинации во время перехода

Установите значениеfalse, если вы хотите отключить устойчивые границы

Эта опция позволяет вам контролировать коэффициент сопротивления

Если эта функция включена, она будет использовать ResizeObserver (если поддерживается браузером) для контейнера Swiper, чтобы определять изменение размера контейнера (вместо отслеживания изменения размера окна)

Установите значениеtrueдля включения режима «перемотки». При включенном режиме нажатие кнопки «следующий слайд» (или вызов.slideNext()) при нахождении на последнем слайде приведет к переходу на первый слайд. Нажатие кнопки «предыдущий слайд» (или вызов.slidePrev()) при нахождении на первом слайде приведет к переходу на последний слайд.

Не следует использовать вместе сloopmode

Задайтеtrueдля округления значений ширины и высоты слайдов, чтобы текст не был размытым на экранах с обычным разрешением (если у вас такие есть)

При инициализации свипера запускаются события Transition/SlideChange/Start/End. Такие события будут запускаться при инициализации, если ваш initialSlide не равен 0 или вы используете режим цикла

Объект с параметрами полосы прокрутки или логическим значениемtrueдля включения с настройками по умолчанию.

const swiper = new Swiper('.swiper', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});

Если вы включите эту опцию, плагин установит ширину/высоту оболочки Swiper, равную общему размеру всех слайдов. В основном эту опцию следует использовать в качестве запасного варианта совместимости для браузеров, которые плохо поддерживают макет flexbox

Установите значениеfalse, если вы хотите отключить короткие прокрутки

ЕслиtrueSwiper будет принимать события мыши, такие как события касания (щелкните и перетащите для смены слайдов)

Имя CSS-класса текущего активного слайда

При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах

Не поддерживается в компонентах Swiper React / Vue

Имя CSS-класса пустого слайда, добавляемого в режиме цикла (при включенииloopAddBlankSlides).

Не поддерживается в Swiper React / Vue

Имя CSS-класса слайда

При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах

Не поддерживается в компонентах Swiper React / Vue

Имя CSS-класса для полностью (когда весь слайд находится в области просмотра) видимого слайда

Не поддерживается в Swiper React / Vue

Имя CSS-класса слайда, которое находится сразу после текущего активного слайда

При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах

Не поддерживается в Swiper React / Vue

CSS-класс slide, который находится прямо перед текущим активным слайдом

При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах

Не поддерживается в Swiper React / Vue

Установите значениеtrueи нажмите на любой слайд, чтобы перейти к этому слайду

Имя CSS-класса текущего / частично видимого слайда

При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах

Не поддерживается в Swiper React / Vue

Добавьте (в пикселях) дополнительное смещение слайда в конце контейнера (после всех слайдов)

Добавьте (в пикселях) дополнительное смещение слайда в начале контейнера (перед всеми слайдами)

Задайте количество слайдов для определения и включения группового скольжения. Полезно использовать с slidesPerView > 1

Этот параметр предназначен для использования только сslidesPerView: 'auto'иslidesPerGroup: 1. Если он включен, то при вызове методов.slideNext()и.slidePrev()будут пропускаться все слайды в режиме просмотра, при нажатии «кнопок» навигации и при автозапуске.

Параметр работает следующим образом: ЕслиslidesPerGroupSkipравно0(по умолчанию), слайды не исключаются из группировки, и результат будет таким же, как и без этого изменения.

ЕслиslidesPerGroupSkipравно или больше1, то первые X слайдов рассматриваются как отдельные группы, а все последующие слайды группируются по значениюslidesPerGroup

Количество слайдов на один просмотр (количество слайдов, одновременно отображаемых в контейнере слайдера).

slidesPerView: 'auto'в настоящее время не поддерживается многострочный режим, когдаgrid.rows> 1

Расстояние между слайдами в пикселях.

Если вы используете свойство CSS «margin» для элементов, которые входят в Swiper и в которые вы передаёте параметр «spaceBetween», навигация может работать некорректно.

Продолжительность перехода между слайдами (в мс)

Строка с CSS-селектором или HTML-элементом контейнера с разбивкой на страницы, которая будет работать как единственный доступный обработчик для прокрутки

Имя узла элемента swiper; используется для определения рендеринга веб-компонента

Пороговое значение в пикселях. Если «расстояние касания» будет меньше этого значения, то свиппер не будет перемещаться

Объект с параметрами компонента thumbs

const swiper = new Swiper('.swiper', {
  ...
  thumbs: {
    swiper: thumbsSwiper
  }
});

Допустимый угол (в градусах) для запуска сенсорного перемещения

Целевой элемент для прослушивания событий касания. Может быть'container'(для прослушивания событий касания на слайдере) или'wrapper'(для прослушивания событий касания на оболочке слайдера)

Если эта функция включена, то распространение события «касание» будет остановлено

Коэффициент соприкосновения

Включите отработку событий касания в крайних положениях ползунка (начало, конец), чтобы обеспечить дальнейшую прокрутку страницы. Эта функция работает только с событиями касания (а не с событиями указателя), поэтому она будет работать на устройствах iOS/Android и не будет работать на устройствах Windows с событиями указателя. Такжеthresholdпараметр должен быть установлен на0

Принудительно всегда предотвращать событие по умолчанию дляtouchstart(pointerdown)

Если он отключен,pointerdownсобытие не будет предотвращено

Если включено (по умолчанию) и параметры элементов навигации передаются в виде строки (например,".pagination"), то Swiper сначала будет искать такие элементы среди дочерних элементов. Применяется для нумерации страниц, кнопок «предыдущая»/«следующая» и элементов полосы прокрутки

Swiper будет пересчитывать положение слайдов при изменении размера окна (ориентации)

Требуется для активного обнаружения слайдов при рендеринге на стороне сервера и включенной истории

строка userAgent. Требуется для определения браузера/устройства при рендеринге на стороне сервера

Включает функцию виртуальных слайдов. Объект с параметрами виртуальных слайдов или логическое значениеtrueдля включения с настройками по умолчанию.

const swiper = new Swiper('.swiper', {
  virtual: {
    slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
  },
});

Если вы включите эту опцию, слайдер будет работать как обычно, за исключением того, что он не будет перемещаться, а значения реального перемещения на обёртке не будут заданы. Полезно, если вам нужно создать собственный переход слайдов

При включении Swiper будет отключён и скроет кнопки навигации, если для скольжения недостаточно слайдов.

Включите эту функцию, чтобы рассчитать прогресс и видимость каждого слайда (слайды в области просмотра будут иметь дополнительный класс видимости)

Ширина Swiper (в пикселях). Параметр позволяет задать ширину Swiper. Полезно только в том случае, если вы инициализируете Swiper, когда он скрыт, а также в средах SSR и Test для правильной инициализации Swiper

Установка этого параметра приведет к тому, что Swiper перестанет реагировать

Имя CSS-класса оболочки слайдов

При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах

Не поддерживается в Swiper React / Vue

Включает функцию масштабирования. Объект с параметрами масштабирования или логическое значениеtrueдля включения с настройками по умолчанию

const swiper = new Swiper('.swiper', {
  zoom: {
    maxRatio: 5,
  },
});

Имя класса CSS добавляется к кнопке навигации, когда она становится отключенной

Логическое свойство для использования с точками останова, чтобы включить/отключить навигацию по определённым точкам останова

Имя класса CSS добавляется к кнопке навигации, когда она становится скрытой

Переключать видимость кнопок навигации после нажатия на контейнер слайдера

Имя класса CSS добавляется к кнопке навигации, когда она отключена

Имя CSS-класса добавлено в контейнер swiper, когда навигация отключена точкой останова

Строка с CSS-селектором или HTML-элементом элемента, который будет работать как кнопка «Далее» после нажатия на неё

Строка с CSS-селектором или HTML-элементом элемента, который будет работать как кнопка «предыдущая» после нажатия на неё

Имя CSS-класса для маркера разбиения на страницы, активного в данный момент

Имя CSS-класса для отдельного маркера разбивки на страницы

Определяет, какой HTML-тег будет использоваться для отображения одиночной кнопки постраничной навигации. Только для'bullets'типа постраничной навигации.

Еслиtrueто нажатие на кнопку разбивки на страницы приведёт к переходу на соответствующий слайд. Только для типа разбивки на страницы с помощью маркеров

Имя CSS-класса устанавливается в разбивку на страницы, когда оно доступно для кликабельности

Имя CSS-класса элемента с текущим активным индексом в «фрагментарной» разбивке на страницы

Рекомендуется включить эту функцию, если вы используете нумерацию слайдов с помощью маркеров. Таким образом, одновременно будет отображаться только несколько маркеров.

Количество основных маркеров, видимых приdynamicBulletsвключении.

Строка с CSS-селектором или HTML-элементом контейнера с разбиением на страницы

Логическое свойство для использования с точками останова, чтобы включить/отключить разбиение на страницы в определённых точках останова

отформатируйте дробную часть текущего номера. Функция получает текущий номер, и вам нужно вернуть отформатированное значение

отформатируйте общее количество разбиений на страницы. Функция получает общее количество, и вам нужно вернуть отформатированное значение

Имя класса CSS для разбивки на страницы, когда он становится неактивным

Переключение (скрытие/показ) видимости контейнера разбивки на страницы после нажатия на контейнер слайдера

Имя CSS-класса, заданное для разбиения на страницы в горизонтальном Swiper

Имя класса CSS устанавливается в разбивку на страницы, когда оно отключено

Начало имени CSS-класса модификатора, который будет добавлен к разбивке на страницы в зависимости от параметров

Имя CSS-класса, добавляемое к контейнеру Swiper и элементу разбивки на страницы, когда разбивка на страницы отключена из-за точки останова

Имя CSS-класса элемента заполнения панели прогресса разбивки на страницы

Делает индикатор выполнения противоположным параметру Swiperdirection: вертикальный индикатор выполнения для горизонтального направления Swiper и горизонтальный индикатор выполнения для вертикального направления Swiper

Имя CSS-класса панели прогресса разбивки на страницы напротив

Этот параметр позволяет полностью настроить маркеры нумерации страниц. Вам нужно передать сюда функцию, которая принимаетindexколичество маркеров нумерации страниц и имя класса необходимого элемента (className). Только для'bullets'типа нумерации

const swiper = new Swiper('.swiper', {
  //...
  renderBullet: function (index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});

Этот параметр необходим для типа разбиения на страницы'custom', где нужно указать способ отображения.

const swiper = new Swiper('.swiper', {
  //...
  renderCustom: function (swiper, current, total) {
    return current + ' of ' + total;
  }
});

Этот параметр позволяет настроить «дробную» нумерацию страниц в HTML. Только для'fraction'типа нумерации

const swiper = new Swiper('.swiper', {
  //...
  renderFraction: function (currentClass, totalClass) {
      return '<span class="' + currentClass + '"></span>' +
              ' of ' +
              '<span class="' + totalClass + '"></span>';
  }
});

Этот параметр позволяет настроить «прогрессивную» разбивку на страницы. Только для'progress'типа разбивки на страницы

const swiper = new Swiper('.swiper', {
  //...
  renderProgressbar: function (progressbarFillClass) {
      return '<span class="' + progressbarFillClass + '"></span>';
  }
});

Имя CSS-класса элемента с общим количеством «отрывков» в «дробной» нумерации

Строка с типом нумерации страниц. Может быть'bullets','fraction','progressbar'или'custom'

Имя CSS-класса, заданное для разбиения на страницы в вертикальном Swiper

CSS-класс перетаскиваемого элемента полосы прокрутки

Размер перетаскиваемого элемента полосы прокрутки в пикселях

Установите значениеtrueдля включения перетаскивания полосы прокрутки, что позволит вам управлять положением ползунка

Строка с CSS-селектором или HTML-элементом контейнера с полосой прокрутки.

Логическое свойство для использования с точками останова для включения/отключения полосы прокрутки в определённых точках останова

Автоматически скрывает полосу прокрутки после взаимодействия с пользователем

Имя класса CSS, заданное как полоса прокрутки в горизонтальном Swiper

Элемент полосы прокрутки - дополнительный CSS-класс, когда он отключен

Имя CSS-класса, добавляемого к контейнеру Swiper и элементу полосы прокрутки, когда полоса прокрутки отключена в точке останова

Установите значениеtrueдля привязки положения ползунка к слайдам при отпускании полосы прокрутки

Имя класса CSS, заданное как полоса прокрутки в вертикальном Swiper

Задержка между переходами (в мс). Если этот параметр не указан, автоматическая игра будет отключена

Если вам нужно указать разную задержку для определённых слайдов, вы можете сделать это с помощью атрибутаdata-swiper-autoplay(в миллисекундах) на слайде.

<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000">

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

Если функция включена, автовоспроизведение будет приостановлено при наведении указателя (мыши) на контейнер Swiper.

Включает автозапуск в обратном направлении

Включите этот параметр, и автоматическое воспроизведение будет остановлено, когда вы дойдёте до последнего слайда (не действует в режиме повтора)

При включённой функции автозапуска будет ожидаться завершение перехода оболочки. Можно отключить в случае использования Virtual Translate, когда ваш слайдер может не иметь перехода

Включен ли бесплатный режим

Минимальная скорость касания, необходимая для запуска импульса в свободном режиме

Если включен, слайд будет продолжать двигаться некоторое время после того, как вы его отпустите

Установите значениеfalse, если вы хотите отключить отскок импульса в бесплатном режиме

Более высокое значение создает больший эффект отскока импульса

Более высокое значение создает большее расстояние импульса после того, как вы отпустите ползунок

Более высокое значение приводит к увеличению скорости вращения после отпускания ползунка

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

Может быть'column'или'row'. Определяет, как слайды должны заполнять строки, по столбцам или по строкам

при использовании в режиме повтора убедитесь, что количество слайдов указано в требованиях к режиму повтора, или включите параметрloopAddBlankSlides

Количество строк слайдов для многострочной компоновки

Включите, если вы хотите использовать «параллаксовые» элементы внутри слайдера

Позволяет слайдам перекрестно исчезать

Смещение глубины в пикселях (слайды перемещаются по оси Z)

Множитель эффекта

Поворот слайда в градусах

Эффект масштабирования слайдов

Позволяет создавать тени на слайдах

Растянуть пространство между слайдами (в пикселях)

Ограничение вращения краевых слайдов

Позволяет создавать тени на слайдах

Включает тень основного слайдера

Основное смещение тени в пикселях

Коэффициент масштабирования основной тени

Позволяет создавать тени на слайдах

Расстояние смещения для каждого слайда (в пикселях)

Угол поворота для каждого слайда (в градусах)

Позволяет вращать карты

Позволяет создавать тени на слайдах

Ограничьте прогресс/смещение количеством боковых слайдов. Если1, то все слайды после предыдущего/следующего будут иметь одинаковое состояние. Если2, то все слайды после второго активного до/после будут иметь одинаковое состояние и т. д.

Следующие преобразования слайдов.

{
  // Array with translate X, Y and Z values
  translate: (string | number)[];
  // Array with rotate X, Y and Z values (in deg)
  rotate?: number[];
  // Slide opacity
  opacity?: number;
  // Slide scale
  scale?: number;
  // Enables slide shadow
  shadow?: boolean;
  // Transform origin, e.g. `left bottom`
  origin?: string;
}

Включите этот параметр, если ваши пользовательские преобразования требуют 3D-преобразований (translateZ,rotateX,rotateY)

Предыдущие преобразования слайдов. Принимает объект следующего типа:

{
  // Array with translate X, Y and Z values
  translate: (string | number)[];
  // Array with rotate X, Y and Z values (in deg)
  rotate?: number[];
  // Slide opacity
  opacity?: number;
  // Slide scale
  scale?: number;
  // Enables slide shadow
  shadow?: boolean;
  // Transform origin, e.g. `left bottom`
  origin?: string;
}

Позволяет многократно изменять прозрачность слайдов.

Разделяет «непрозрачность» тени на каждом слайде в зависимости отlimitProgress(только если включена трансформация теней). Например, при установкеlimitProgress: 2и включенииshadowPerProgressнепрозрачность тени будет равна0.5и1на двух слайдах рядом с активным. Если этот параметр отключен, все слайды, кроме активного, будут иметь тень с непрозрачностью1

Позволяет задать, на скольких активных слайдах от края должна автоматически перемещаться прокрутка. Например, если установлено значение 1 и будет активирован последний видимый слайд (1 от края), то будет автоматически прокручиваться

При включении может быть активировано несколько миниатюр слайдов

Дополнительный класс, который будет добавлен к активированному слайду thumbs swiper

Экземпляр Swiper, используемый в качестве больших пальцев, или объект с параметрами Swiper для инициализации больших пальцев Swiper

Дополнительный класс, который будет добавлен в thumbs swiper

Имя CSS-класса контейнера масштабирования

Если установлено значение true, изображение не будет масштабироваться более чем на 100% от исходного размера

Максимальный множитель масштабирования изображения

Минимальный множитель масштабирования изображения

Включение / отключение увеличения двойным касанием слайда

Имя CSS-класса увеличенного контейнера

Установите значениеtrue, чтобы включить управление с клавиатуры

Когда он включен, он будет управлять ползунками, которые в данный момент находятся в окне просмотра

Когда он включен, он позволяет осуществлять навигацию по клавиатуре с помощью клавиш Page Up и Page Down

Установите значениеtrue, чтобы включить управление колесом мыши

Строка с CSS-селектором или HTML-элементом контейнера, принимающего события колесика мыши. По умолчанию это swiper

Установите значениеtrueдля принудительного прокручивания колесика мыши по оси. Таким образом, в горизонтальном режиме колесико мыши будет работать только при горизонтальной прокрутке, а в вертикальном режиме — только при вертикальной прокрутке.

Установите значениеtrueдля инвертирования направления скольжения

Прокрутка элементов с этим классом будет игнорироваться

Установите значениеtrueи swiper будет отключать событие прокрутки колесом мыши и позволять прокручивать страницу, когда swiper находится на краю (в начале или в конце)

Множитель данных о колесе мыши, позволяет настроить чувствительность колесика мыши

Минимальная дельта прокрутки колесика мыши для запуска смены слайда swiper

Минимальная разница во времени прокрутки колесика мыши (в мс) для запуска смены слайдов в свипере

Увеличивает количество предварительно отрисованных слайдов после активного слайда

Увеличивает количество предварительно отрисованных слайдов перед активным слайдом

Включает кэш DOM для рендеринга HTML-элементов слайдов. После рендеринга они будут сохранены в кэше и использованы повторно.

Включены ли виртуальные слайды

Функция для внешнего рендеринга (например, с использованием другой библиотеки для обработки манипуляций с DOM и состояния, такой как React.js или Vue.js). В качестве аргумента она принимаетdataобъект со следующими свойствами:

• offset- смещение влево / вверх в пикселях
• from- индекс первого слайда, необходимого для рендеринга
• to- индекс последнего слайда, необходимого для рендеринга
• slides- массив с элементами слайдов для рендеринга

Если он включен (по умолчанию), то обновит макет Swiper сразу после вызова renderExternal. Полезно отключать и обновлять Swiper вручную при использовании с библиотеками рендеринга, которые выполняют рендеринг асинхронно

Функция для отображения слайда. В качестве аргумента она принимает текущий элемент слайда дляslidesмассива и номер индекса текущего слайда. Функция должна возвращать внешний HTML-код слайда или HTML-элемент слайда.

Массив со слайдами

Предназначен для использования с виртуальными слайдами, когда невозможно найти слайд в DOM по хешу (например, он ещё не отобразился)

Работает в дополнение к hashnav, заменяя текущий URL-адрес новым вместо добавления его в историю

Задайте значениеtrueдля включения навигации по слайдам (при включенном hashnav) с помощью истории браузера или путем непосредственного указания хэша в адресе документа

Включает плагин History.

Сохраняйте параметры запроса при изменении URL браузера.

URL-ключ для слайдов

Работает в дополнение к hashnav или истории, заменяя текущий URL-адрес новым вместо добавления его в историю

Корневая страница Swiper, полезная для указания, когда вы используете режим истории Swiper не на главной странице сайта. Например, это может бытьhttps://my-website.com/илиhttps://my-website.com/subpage/или/subpage/

Определяет способ управления другим слайдером: слайд за слайдом (относительно сетки другого слайдера) или в зависимости от всех слайдов/контейнера (в зависимости от общего процента слайдера).

Передайте сюда другой экземпляр Swiper или массив с экземплярами Swiper, которыми должен управлять этот Swiper. Также принимает строку с CSS-селектором элемента Swiper или HTMLElement элемента Swiper

Установите значениеtrue, и управление будет осуществляться в обратном направлении

Сообщение для программ чтения с экрана для внешнего контейнера swiper

Значение атрибута «роль», которое необходимо задать для контейнера свипера

Сообщение для программ чтения с экрана, описывающее роль внешнего контейнера swiper

Включает A11y

Сообщение для программ чтения с экрана для предыдущей кнопки, когда swiper находится на первом слайде

Значение атрибутаidдолжно быть задано для swiper-wrapper. Еслиnullбудет сгенерировано автоматически

Сообщение для программ чтения с экрана, описывающее роль элемента slide

Сообщение для программ чтения с экрана для кнопки "Далее", когда swiper находится на последнем слайде

Сообщение для программ чтения с экрана для кнопки "Далее"

Имя CSS-класса уведомления A11y

Сообщение для программ чтения с экрана для маркера с одной страницей

Сообщение для программ чтения с экрана для предыдущей кнопки

Позволяет прокручивать слайд, на котором был сделан фокус

Сообщение для программ чтения с экрана с описанием метки элемента слайда

Значение атрибута swiper sliderole