---
title: "Параметры Swiper - WebTolk"
description: "Список всех доступных параметров Swiper.js."
url: "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-parameters"
date: "2026-06-07T02:56:59+00:00"
language: "ru-RU"
---

# Параметры Swiper

WT JSwiper - SWiper.js для Joomla-разработчиков - Документация

**Категория:** [Плагины Joomla](https://web-tolk.ru/dev/joomla-plugins)

[Проект](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper)[Версии](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/versions)[Документация](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation)[GitHub](https://github.com/WebTolk/WT-JSwiper-Joomla-web-asset-plugin)[JED](https://extensions.joomla.org/extension/core-enhancements/libraries/wt-jswiper/)

Список всех доступных параметров Swiper.js.

## a11y

Тип: `any`

Значение по умолчанию: нет

### Описание

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

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

## allowSlideNext

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

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

## allowSlidePrev

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

Установите `false`, чтобы отключить переход к предыдущему слайду (влево или вверх).

## allowTouchMove

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

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

## autoHeight

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

Установите `true` и slider wrapper адаптирует свою высоту к высоте текущего активного слайда.

## autoplay

Тип: `any`

Значение по умолчанию: нет

### Описание

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

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

## breakpoints

Тип: `object`

Значение по умолчанию: нет

### Описание

Позволяет задать разные параметры для разных брейкпоинтов (размеров экрана). Не все параметры можно изменить в параметрах брейкпоинтов, но только те, что не требуют другого расположения и логики, например, `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,
    },
  }
});
```

## breakpointsBase

Тип: `any`

Значение по умолчанию: `window`

### Описание

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

## cardsEffect

Тип: `any`

Значение по умолчанию: нет

### Описание

Объект с параметрами эффекта карточек (cards effect).

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

## centerInsufficientSlides

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

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

## centeredSlides

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

Если установлено в `true`, то активный слайд будет отцентрирован, а не всегда по левой стороне.

## centeredSlidesBounds

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

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

## containerModifierClass

Тип: `string`

Значение по умолчанию: `swiper-`

### Описание

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

## controller

Тип: `any`

Значение по умолчанию: нет

### Описание

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

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

## coverflowEffect

Тип: `any`

Значение по умолчанию: нет

### Описание

Объект с параметрами Coverflow-effect.

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

## createElements

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

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

## creativeEffect

Тип: `any`

Значение по умолчанию: нет

### Описание

Объект с параметрами Creative-effect.

```
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],
    },
  },
});
```

## cssMode

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

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

Если включено, то не будет работать следующее:

- Cube effect
- `speed` - скорость прокрутки может игнорироваться
- все события, связанные с началом / окончанием переходов (transition). Используйте `slideChange`.
- `slidesPerGroup`. Ограниченная поддержка.
- `simulateTouch` не работает, поэтому перетаскивание мышОй не будет работать тоже.
- `resistance` отвалится тоже
- `allowSlidePrev/Next`
- `swipeHandler`

В случае, если вы используете его с другими эффектами, особенно с 3D-эффектами, содержимое слайда необходимо обернуть `<div className="swiper-slide-transform">`. И если вы используете какие-нибудь пользовательские CSS на слайдах (например, `background-color`, `border-radius`, `border` и т.д.), их нужно установить на элемент `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>
```

## cubeEffect

Тип: `any`

Значение по умолчанию: нет

### Описание

Объект с параметрами **Cube-effect**.

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

## direction

Тип: `string`

Значение по умолчанию: `horizontal`

### Описание

Направление прокрутки слайдов горизонтальное (`horizontal`) или вертикальное (`vertical`). Можно применять в объекте настроек `breackpoints`.

## edgeSwipeDetection

Тип: `string | boolean`

Значение по умолчанию: `false`

### Описание

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

## edgeSwipeThreshold

Тип: `number`

Значение по умолчанию: `20`

### Описание

Область (в пикселях) от левого края экрана для touch events для использования swipe-back в приложении.

## effect

Тип: `string`

Значение по умолчанию: `slide`

### Описание

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

## enabled

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

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

## eventsPrefix

Тип: `string`

Значение по умолчанию: `swiper`

### Описание

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

## fadeEffect

Тип: `any`

Значение по умолчанию: нет

### Описание

Объект с параметрами Fade-effect.

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

## flipEffect

Тип: `any`

Значение по умолчанию: нет

### Описание

Объект с параметрами Flip-effect.

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

## flipEffect

Тип: `string`

Значение по умолчанию: `input, select, option, textarea, button, video, label`

### Описание

CSS-селекторы элементов, для которых будет срабатывать focus. Пролистывание таких элементов будет отключено, если они "сфокусированы".

## followFinger

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

Если установлено в `false`, то анимация слайдер сработает только, когда вы отпустите палец. Карусель не будет двигаться, пока вы удерживаете её пальцем.

## freeMode

Тип: `any`

Значение по умолчанию: нет

### Описание

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

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

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

## grabCursor

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

Включает небольшое улучшение удобства использования Swiper на декстопных устройствах. Если `true`, то пользователь увидит изменение курсора при наведении на Swiper.

## grid

Тип: `any`

Значение по умолчанию: нет

### Описание

Объект с параметрами **grid,**чтобы слайдер состоял из нескольких рядов.

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

## hashNavigation

Тип: `any`

Значение по умолчанию: нет

### Описание

Включает навигацию по хешу в url (hash url navigation). Объект с параметрами хеш-навигацииили логическим значением `true` для включения с настройками по умолчанию.

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

## height

Тип: `null | number`

Значение по умолчанию: `null`

### Описание

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

Внимание! Включение этой опции сделает Swiper не адаптивным!

## history

Тип: `any`

Значение по умолчанию: нет

### Описание

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

Объект с параметрами **history navigation** или логическим значением `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>
```

## init

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

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

## initialSlide

Тип: `number`

Значение по умолчанию: `0`

### Описание

Порядковый номер (индекс) первого слайда. `0` - первый слайд. `1` - второй и т.д.

## injectStyles

Тип: `string[]`

Значение по умолчанию: нет

### Описание

Внедряет стили Swiper в теневой DOM (Shadow DOM). Необходимо только при использовании со Swiper Element.

## injectStylesUrls

Тип: `string[]`

Значение по умолчанию: нет

### Описание

Внедряет `<link>` CSS-стилей в теневой DOM (Shadow DOM). Необходимо только при использовании со Swiper Element.

## keyboard

Тип: `any`

Значение по умолчанию: нет

### Описание

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

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

## lazyPreloadPrevNext

Тип: `number`

Значение по умолчанию: `0`

### Описание

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

## lazyPreloaderClass

Тип: `string`

Значение по умолчанию: `swiper-lazy-preloader`

### Описание

CSS класс для lazy preloader.

## longSwipes

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

Установите `false`, если вы хотите отключить долгий свайп.

## longSwipesMs

Тип: `number`

Значение по умолчанию: `300`

### Описание

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

## longSwipesRatio

Тип: `number`

Значение по умолчанию: `0.5`

### Описание

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

## loop

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

Установите `true`, чтобы зациклить карусель слайдов.

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

- больше или равно, чем `slidesPerView` + `slidesPerGroup`
- даже в `slidesPerGroup` (или используйте параметр `loopAddBlankSlides`)
- даже в `grid.rows` (или используйте параметр `loopAddBlankSlides`)

## loopAddBlankSlides

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

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

## loopAdditionalSlides

Тип: `number`

Значение по умолчанию: `0`

### Описание

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

## loopPreventsSliding

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

Если включено, то `slideNext`/`Prev` ничего не будет делать, пока слайдер анимируется в режиме `loop`.

## maxBackfaceHiddenSlides

Тип: `number`

Значение по умолчанию: `10`

### Описание

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

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

## modules

Тип: `any[]`

Значение по умолчанию: нет

### Описание

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

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

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

## mousewheel

Тип: `any`

Значение по умолчанию: нет

### Описание

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

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

## navigation

Тип: `any`

Значение по умолчанию: нет

### Описание

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

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

## nested

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

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

## noSwiping

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

Включает или выключает свайп на элементах с CSS-классом, указанным в параметре `noSwipingClass`.

## noSwipingClass

Тип: `string`

Значение по умолчанию: `swiper-no-swiping`

### Описание

Укажите CSS-класс для параметра `noSwiping`.

## noSwipingSelector

Тип: string

Значение по умолчанию: нет

### Описание

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

## normalizeSlideIndex

Тип: boolean

Значение по умолчанию: `true`

### Описание

Нормализация индекса слайда. Понимаем это как хотим - методом научного тыка.

## observeParents

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

Установите `true`, если вы хотите следить за мутациями родительских элементов Swiper.

## observeSlideChildren

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

Установите `true`, если вы хотите следить за мутациями дочерних элементов Swiper.

## observer

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

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

## on

Тип: `object`

Значение по умолчанию: нет

### Описание

Регистрирует обработчики событий.

## onAny

Тип: `function(handler)`

Значение по умолчанию: нет

### Описание

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

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

## oneWayMovement

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

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

## pagination

Тип: `any`

Значение по умолчанию: нет

### Описание

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

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

## parallax

Тип: `any`

Значение по умолчанию: нет

### Описание

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

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

## passiveListeners

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

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

## passiveListeners

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

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

## preventInteractionOnTransition

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

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

## resistance

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

Установите `false` для отключения "устойчивых границ". Это своего рода "охранные зоны" в крайне левом и крайне правой части слайда (самая верхняя и самая нижняя для вертикального режима), в которых Swiper увеличит сопротивление прокрутке.

## resistanceRatio

Тип: `number`

Значение по умолчанию: `0.85`

### Описание

Эта опция позволяет вам регулировать коэффициент сопротивления, если включена опция **resistance**.

## resizeObserver

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

Когда он включен, он будет использовать `ResizeObserver` (если поддерживается браузером) в swiper container для обнаружения изменения размера контейнера (вместо отслеживания изменения размера окна).

## rewind

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

Установите значение `true`, чтобы включить режим "перемотки". Если он включен, нажатие навигационной кнопки "далее" (или вызов `.slideNext()`) при просмотре последнего слайда приведет к возврату к первому слайду. Нажатие навигационной кнопки "назад" (или вызов `.slidePrev()`) при просмотре первого слайда приведет к переходу к последнему слайду.

Нельзя использовать совместно с режимом `loop`.

## roundLengths

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

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

## runCallbacksOnInit

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

Вызов событий `Transition` / `SlideChange` / `Start` / `End` при инициализации **swiper**. Такие события будут запускаться при инициализации, если ваш начальный слайд не равен `0`, или вы используете режим **loop**.

## scrollbar

Тип: `any`

Значение по умолчанию: нет

### Описание

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

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

## setWrapperSize

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

Включите этот параметр и swiper установит высоту / ширину обёртки (swiper wrapper) равную общему количеству всех слайдов. Чаще всего используется для обратной совместимости со старыми браузерами, которые ещё не поддерживают `flexbox`.

## shortSwipes

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

Установите `true`, если хотите отключить короткие свайпы.

## simulateTouch

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

Если `true` , то swiper будет обрабатывать события мыши (mouse events) как события касания (touch events) - клик и перетаскивание для изменения слайда.

## slideActiveClass

Тип: `string`

Значение по умолчанию: `swiper-slide-active`

### Описание

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

Если меняете имя класса - измените и CSS Swiper для корректной работы.

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

## slideBlankClass

Тип: `string`

Значение по умолчанию: `swiper-slide-blank`

### Описание

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

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

## slideClass

Тип: `string`

Значение по умолчанию: `swiper-slide`

### Описание

CSS класс слайда.

Если меняете имя класса - измените и CSS Swiper для корректной работы.

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

## slideFullyVisibleClass

Тип: `string`

Значение по умолчанию: `swiper-slide-fully-visible`

### Описание

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

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

## slideNextClass

Тип: `string`

Значение по умолчанию: `swiper-slide-next`

### Описание

CSS класс слайда, следующего за текущим активным слайдом.

Если меняете имя класса - измените и CSS Swiper для корректной работы.

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

## slidePrevClass

Тип: `string`

Значение по умолчанию: `swiper-slide-prev`

### Описание

CSS класс слайда, предшествующего текущему активному слайду.

Если меняете имя класса - измените и CSS Swiper для корректной работы.

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

## slideToClickedSlide

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

Установите `true`, и клик по любому слайду приведет к переходу к этому слайду.

## slideVisibleClass

Тип: string

Значение по умолчанию: `swiper-slide-visible`

### Описание

CSS класс для полностью или частично видимого слайда.

Если меняете имя класса - измените и CSS Swiper для корректной работы.

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

## slidesOffsetAfter

Тип: `number`

Значение по умолчанию: `0`

### Описание

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

## slidesOffsetBefore

Тип: `number`

Значение по умолчанию: `0`

### Описание

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

## slidesOffsetBefore

Тип: `number`

Значение по умолчанию: `1`

### Описание

Укажите количество слайдов включить перемещение группой слайдов. Имеет смысл указывать `slidesPerView > 1`.

## slidesPerGroupAuto

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

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

## slidesPerGroupSkip

Тип: `number`

Значение по умолчанию: `0`

### Описание

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

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

## slidesPerView

Тип: `number | 'auto'`

Значение по умолчанию: `1`

### Описание

Количество слайдов, видимых в области просмотра (слайды одновременно отображаются в контейнере слайдера). От переводчика: также можно указывать десятичные дроби: читаем статью [Показать фрагмент следующего слайда в Swiper.js](https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/index.php?option=com_content&view=article&id=120&catid=10&lang=ru-RU).

`slidesPerView: 'auto'` не совместим с режимом **multirow**, где `grid.rows > 1`.

## spaceBetween

Тип: `string | number`

Значение по умолчанию: `0`

### Описание

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

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

## speed

Тип: `number`

Значение по умолчанию: `300`

### Описание

Длительность смены слайдами в микросекундах.

## swipeHandler

Тип: `any`

Значение по умолчанию: `null`

### Описание

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

## swiperElementNodeName

Тип: `string`

Значение по умолчанию: `SWIPER-CONTAINER`

### Описание

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

## threshold

Тип: number

Значение по умолчанию: `5`

### Описание

Пороговое значение в пикселях. Если "расстояние касания" будет меньше этого значения, то swiper не будет двигаться. Нужно для того, чтоб карусель не была слишком чувствительной к случайным касаниям.

## thumbs

Тип: `any`

Значение по умолчанию: нет

### Описание

Объект с параметрами **thumbs**.

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

## touchAngle

Тип: `number`

Значение по умолчанию: `45`

### Описание

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

## touchEventsTarget

Тип: `'container' | 'wrapper'`

Значение по умолчанию: `wrapper`

### Описание

На каком элементе прослушивать события касания. Может быть `container` (слушаем события касания в swiper) или `wrapper` (слушаем события касания в `swiper-wrapper`).

## touchMoveStopPropagation

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

Если этот параметр включен, дальнейшее распространение события "touchmove" по DOM-дереву будет остановлено.

## touchRatio

Тип: `boolean`

Значение по умолчанию: `1`

### Описание

Коэффициент касания.

## touchReleaseOnEdges

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

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

## touchStartForcePreventDefault

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

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

## touchStartPreventDefault

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

Если отключено - для события **pointerdown** не будет отменяться действие браузера по умолчанию.

## touchStartPreventDefault

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

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

## updateOnWindowResize

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

Swiper пересчитает положение слайдов при изменении размера окна (событие `orientationchange`).

## url

Тип: `null | string`

Значение по умолчанию: `null`

### Описание

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

## userAgent

Тип: `null | string`

Значение по умолчанию: `null`

### Описание

Строка User Agent бразуера. Требуется для определения браузера / устройства при рендере на стороне сервера (SSR).

## virtual

Тип: `any`

Значение по умолчанию: нет

### Описание

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

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

## virtualTranslate

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

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

## watchOverflow

Тип: `boolean`

Значение по умолчанию: `true`

### Описание

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

## watchSlidesProgress

Тип: `boolean`

Значение по умолчанию: `false`

### Описание

Установите `true`, чтобы рассчитать прогресс и видимость каждого слайда (слайды в окне просмотра будут иметь дополнительный класс, означающий, что слайд видим).

## width

Тип: `null | number`

Значение по умолчанию: `null`

### Описание

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

Установка этого параметра сделает Swiper "не отзывчивым" - не адаптивным.

## wrapperClass

Тип: `string`

Значение по умолчанию: `swiper-wrapper`

### Описание

CSS-класс для обёртки (wrapper) Swiper.

Если меняете имя класса - измените и CSS Swiper для корректной работы.

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

## zoom

Тип: `any`

Значение по умолчанию: нет

### Описание

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

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

## JSON-LD Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@id": "https://web-tolk.ru/",
                "name": "Главная"
            }
        },
        {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "https://web-tolk.ru/dev",
                "name": "Расширения Joomla"
            }
        },
        {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "@id": "/dev/joomla-plugins",
                "name": "Плагины Joomla"
            }
        },
        {
            "@type": "ListItem",
            "position": 4,
            "item": {
                "@id": "/dev/joomla-plugins/wt-jswiper",
                "name": "WT JSwiper - SWiper.js для Joomla-разработчиков"
            }
        },
        {
            "@type": "ListItem",
            "position": 5,
            "item": {
                "@id": "/dev/joomla-plugins/wt-jswiper/documentation",
                "name": "Документация"
            }
        },
        {
            "@type": "ListItem",
            "position": 6,
            "item": {
                "name": "Параметры Swiper"
            }
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": "Organization",
            "@id": "https://web-tolk.ru/#/schema/Organization/base",
            "name": "WebTolk",
            "url": "https://web-tolk.ru/",
            "logo": {
                "@type": "ImageObject",
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo",
                "url": "images/webtolk-1080p.jpg",
                "contentUrl": "images/webtolk-1080p.jpg",
                "width": 1920,
                "height": 1080
            },
            "image": {
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo"
            },
            "sameAs": [
                "https://github.com/WebTolk",
                "https://github.com/sergeytolkachyov",
                "https://vk.com/web_tolk",
                "https://vk.com/webtolkru",
                "https://tenchat.ru/sergeytolkachyov",
                "https://t.me/sergeytolkachyov",
                "https://t.me/webtolkru"
            ]
        },
        {
            "@type": "WebSite",
            "@id": "https://web-tolk.ru/#/schema/WebSite/base",
            "url": "https://web-tolk.ru/",
            "name": "WebTolk",
            "publisher": {
                "@id": "https://web-tolk.ru/#/schema/Organization/base"
            }
        },
        {
            "@type": "WebPage",
            "@id": "https://web-tolk.ru/#/schema/WebPage/base",
            "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-parameters",
            "name": "Параметры Swiper - WebTolk",
            "description": "Список всех доступных параметров Swiper.js.",
            "isPartOf": {
                "@id": "https://web-tolk.ru/#/schema/WebSite/base"
            },
            "about": {
                "@id": "https://web-tolk.ru/#/schema/TechArticle/base"
            },
            "inLanguage": "ru-RU",
            "breadcrumb": {
                "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17"
            }
        },
        {
            "@type": "TechArticle",
            "headline": "Параметры Swiper",
            "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-parameters",
            "description": "Список всех доступных параметров Swiper.js.",
            "mainEntityOfPage": {
                "@type": "WebPage",
                "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/swiper-parameters"
            }
        }
    ]
}
```