--- title: "Методы и свойства Swiper.js - WebTolk" description: "Список всех доступных свойств и методов Swiper.js на русском языке." url: "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/methods-and-properties-swiper-js" date: "2026-06-20T03:14:03+00:00" language: "ru-RU" --- # Методы и свойства Swiper.js 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. После инициализации Swiper мы имеем его инициализированный экземпляр в переменной (как переменная swiper в примерах) с полезными методами и свойствами. ## Свойства Swiper.js --- ### swiper.a11y Тип: `any` #### Описание Объект с параметрами **a11y** или логическим значением `true` для включения с настройками по умолчанию, который мы устанавливали при инициализации. ### swiper.activeIndex Тип: `number` #### Описание Порядковый номер текущего активного слайда. Обратите внимание, что в режиме `loop` значение активного индекса всегда будет смещено на несколько зацикленных слайдов ### swiper.allowSlideNext Тип: `boolean` #### Описание Отключить или включить возможность перехода к **следующим** слайдам (запретить пролистывание), присвоив этому свойству значение `false` / `true`. Если вам сильно кто-то не понравился и вы решили на лету отключить ему просмотр карусели 😎. ### swiper.allowSlidePrev Тип: `boolean` #### Описание Отключить или включить возможность перехода к **предыдущим**слайдам (запретить пролистывание), присвоив этому свойству значение `false` / `true`. Вам по-прежнему сильно кто-то не нравится 😎. ### swiper.allowTouchMove Тип: `boolean` #### Описание Разрешить или заблокировать возможность перемещения ползунка слайдера с помощью мышки или касанием пальца. Установите `true` или `false`. 😎. ### swiper.animating Тип: `boolean` #### Описание `true` если swiper в процессе перехода (transition). ### swiper.autoplay Тип: `any` ### swiper.cardsEffect Тип: `any` ### swiper.clickedIndex Тип: `number` #### Описание Порядковый номер последнего просмотренного слайда. ### swiper.clickedSlide Тип: `HTMLElement` #### Описание Ссылка на последний просмотренный слайд (`HTMLElement`). ### swiper.controller Тип: `any` ### swiper.coverflowEffect Тип: `any` ### swiper.creativeEffect Тип: `any` ### swiper.cubeEffect Тип: `any` ### swiper.defaults Тип: `any` #### Описание Все параметры **swiper** по умолчанию. ### swiper.el Тип: `HTMLElement` #### Описание HTML-элемент контейнера слайдера. ### swiper.extendedDefaults Тип: `any` #### Описание Объект с расширенными параметрами глобального Swiper. ### swiper.fadeEffect Тип: `any` ### swiper.flipEffect Тип: `any` ### swiper.freeMode Тип: `any` ### swiper.hashNavigation Тип: `any` ### swiper.height Тип: `number` #### Описание Высота контейнера Swiper. ### swiper.history Тип: `any` ### swiper.isBeginning Тип: `boolean` #### Описание Логический признак положения "в начале". `true` если ползунок слайдера находится в крайне левом / в верхнем положении (в зависимости от ориентации слайдера горизонтальная / вертикальная). ### swiper.isEnd Тип: `boolean` #### Описание Логический признак положения "в конце". `true` если ползунок слайдера находится в крайне правом / в нижнем положении (в зависимости от ориентации слайдера горизонтальная / вертикальная). ### swiper.isLocked Тип: `boolean` #### Описание `true`, если слайдер "заблокирован" (с помощью `watchOverflow`) и показ слайдов невозможен. Например если количество слайдов меньше, чем указано в параметре `slidesPerView`. ### swiper.keyboard Тип: `any` ### swiper.mousewheel Тип: `any` ### swiper.navigation Тип: `any` ### swiper.originalParams Тип: `any` #### Описание Объект с параметрами Swiper, которые мы устанавливали при инициализации. ### swiper.pagination Тип: `any` ### swiper.parallax Тип: `any` ### swiper.params Тип: `any` #### Описание Объект с полученными для инициализации Swiper параметрами. ### swiper.previousIndex Тип: `number` #### Описание Номер предыдущего активного слайда. ### swiper.progress Тип: `number` #### Описание Текущий ход выполнения перевода обёртки (swiper wrapper) - от `0` до `1`. ### swiper.realIndex Тип: `number` #### Описание Порядковый номер текущего активного слайда с учетом переупорядоченных слайдов в режиме `loop`. ### swiper.scrollbar Тип: `any` ### swiper.slides Тип: `HTMLElement[]` #### Описание Массив HTML элементов. Для получения `HTMLElement` конкретного слайда обращайтесь по индексу `swiper.slides[1]`. ### swiper.slidesEl Тип: `HTMLElement` #### Описание HTML элемент обёртки (wrapper). ### swiper.slidesGrid Тип: `number[]` #### Описание Сетка слайдов (slides grid). ### swiper.slidesSizesGrid Тип: `number[]` #### Описание Массив со значениями ширины для слайдов. ### swiper.snapGrid Тип: `number[]` #### Описание Slides snap grid. Возможно имеется в виду привязка к сетке. Требует уточнения. ### swiper.snapIndex Тип: `number` #### Описание Порядковый номер текущей привязки к сетке в массиве `snapGrid`. ### swiper.swipeDirection Тип: `prev | next` #### Описание Направление движения слайдера: вперёд или назад. ### swiper.thumbs Тип: `any` ### swiper.touches Тип: `object` #### Описание Объект со свойствами следующих событий касания (touch event properties): - `swiper.touches.startX` - `swiper.touches.startY` - `swiper.touches.currentX` - `swiper.touches.currentY` - `swiper.touches.diff` ### swiper.translate Тип: `number` #### Описание Текущее значение перемещения обёртки слайдера (wrapper translate). ### swiper.virtual Тип: `any` ### swiper.width Тип: `number` #### Описание Ширина контейнера **Swiper.js**. ### swiper.wrapperEl Тип: `HTMLElement` #### Описание HTMLElement обёртки (wrapper) слайдера. ### swiper.zoom Тип: `any` ## Методы Swiper.js ### swiper.attachEvents() #### Описание Заново включает слушателей всех событий. ### swiper.changeDirection(direction, needUpdate) #### Описание Изменяет направление движения слайдера с горизонтального на вертикальное и обратно. direction - 'horizontal' | 'vertical' Новое направление. Если не указано, то будет автоматически изменено на противоположное направление. needUpdate - boolean Вызовет метод `swiper.update()`. По умолчанию `true`. ### swiper.changeLanguageDirection(direction) #### Описание Изменяет направление письма для слайдера. direction - 'rtl' | 'ltr' Новое направление. Должно быть `'rtl' | 'ltr'`. ### swiper.destroy(deleteInstance, cleanStyles) #### Описание Заново включает слушателей всех событий. ### swiper.attachEvents() #### Описание Удаляет экземпляр слайдера и всех слушателей событий. deleteInstance - boolean Установите `false`, чтобы не удалять экземпляр swiper. По умолчанию `true`. cleanStyles - boolean Установите значение `true` (значение по умолчанию), и все пользовательские стили будут удалены из слайдов, обёртки и контейнера. Полезно, если вам нужно удалить Swiper и запустить его заново с новыми параметрами или в другом направлении. ### swiper.detachEvents() #### Описание Удаляет все слушатели событий. ### swiper.disable() #### Описание Отключает Swiper (если он был включен). Когда Swiper отключен - скрываются все элементы навигации и он не будет реагировать ни на какие события и взаимодействия. Потыкайте его вилкой, жив ли он... ### swiper.emit(event, args) #### Описание Вызывает событие на экземпляре swiper. ### swiper.enable() #### Описание Включает swiper, если он был выключен. Появляются элементы навигации, включается реакция на взаимодействия и события. ### swiper.extendDefaults(options) #### Описание Можно расширить глобальные параметры Swiper. ### swiper.getTranslate() #### Описание Метод возвращает текущее значение CSS 3 transform translate для обёртки (wrapper) swiper. ### swiper.init(el) #### Описание Инициализация swiper на нужном элементе. ### swiper.maxTranslate() #### Описание Получить текущее максимальное значение преобразования ### swiper.minTranslate() #### Описание Получить текущее минимальное значение преобразования. ### swiper.off(event, handler) #### Описание Удаляет обработчик события. ### swiper.offAny(handler) #### Описание Удаляет все обработчики всех событий. ### swiper.on(event, handler) #### Описание Добавляет обработчик события. ### swiper.onAny(handler) #### Описание Добавляет обработчик события, который будет вызываться на любом событии swiper. ### swiper.once(event, handler) #### Описание Добавляет обработчик события, который будет удалён после срабатывания. ### swiper.setGrabCursor() #### Описание Установить захват курсора. ### swiper.setProgress(progress, speed) #### Описание Установите значение Swiper translate progress (от 0 до 1). Где 0 - его начальное положение (смещение) на первом слайде, а 1 - его максимальное положение (смещение) на последнем слайде progress - number Процент смещения swiper (от `0` до `1`). speed - number Время смещения (в мс). ### swiper.setTranslate(translate) #### Описание Укажите пользовательское значение CSS 3 transform translate для обёртки (wrapper) swiper. ### swiper.slideNext(speed, runCallbacks) #### Описание Запускает переход к следующему слайду. speed - number Длительность перехода (в мс). runCallbacks - boolean По умолчанию `true`. Установите `false`, чтобы не вызывать события переходов. ### swiper.slidePrev(speed, runCallbacks) #### Описание Запускает переход к предыдущему слайду. speed - number Длительность перехода (в мс). runCallbacks - boolean По умолчанию `true`. Установите `false`, чтобы не вызывать события переходов. ### swiper.slideReset(speed, runCallbacks) #### Описание Сбрасывает положение swiper к текущему активному слайду за время, равное параметру `speed`. speed - number Длительность перехода (в мс). runCallbacks - boolean По умолчанию `true`. Установите `false`, чтобы не вызывать события переходов. ### swiper.slideTo(index, speed, runCallbacks) #### Описание Запускает переход к слайду с указанным порядковым номером (индексом) за время, равное параметру `speed`. index - number Порядковый номер слайда speed - number Длительность перехода (в мс). runCallbacks - boolean По умолчанию `true`. Установите `false`, чтобы не вызывать события переходов. ### swiper.slideToClosest(speed, runCallbacks) #### Описание Сбрасывает положение swiper к ближайшему слайду или точке фиксации (snap point) за время, равное параметру `speed`. speed - number Длительность перехода (в мс). runCallbacks - boolean По умолчанию `true`. Установите `false`, чтобы не вызывать события переходов. ### swiper.slideToLoop(index, speed, runCallbacks) #### Описание Делает то же, что и метод `slideTo()`, но для режима `loop`. Будет переход к слайдам с реальным индексом, соответствующим переданному индексу. Запускает переход к слайду с указанным порядковым номером (индексом) за время, равное параметру `speed`. index - number Порядковый номер слайда speed - number Длительность перехода (в мс). runCallbacks - boolean По умолчанию `true`. Установите `false`, чтобы не вызывать события переходов. ### swiper.slidesPerViewDynamic() #### Описание Метод возвращает динамически рассчитываемое количество слайдов в зоне видимости (`slidesPerView`). Метод полезен только в случае, если параметр `slidesPerView`установлен на `auto`. ### swiper.translateTo(translate, speed, runCallbacks, translateBounds) #### Описание Задаёт значение пользовательского CSS3 transform translate для обёртки swiper (wrapper). translate - number Значение `translate` (в пикселях) speed - number Длительность перехода (в мс). runCallbacks - boolean По умолчанию `true`. Установите `false`, чтобы не вызывать события переходов. translateBounds - boolean По умолчанию `true`. Установите `false` и значение перехода (`transition`) может выходить за пределы значений min и max для `translate`. ### swiper.unsetGrabCursor() #### Описание Отключает захват курсора. ### swiper.update() #### Описание Метод необходимо вызывать после добавления / удаления слайдов вручную, после сокрытия / отображения, или если вы внесете какие-либо пользовательские изменения в DOM с помощью Swiper. Этот метод также включает в себя дополнительный вызов следующих методов, которые вы можете использовать отдельно: - `swiper.updateAutoHeight(speed)` - `swiper.updateProgress()` - `swiper.updateSize()` - `swiper.updateSlides()` - `swiper.updateSlidesClasses()` - `swiper.use(modules)` ### swiper.updateAutoHeight(speed) #### Описание Заставьте swiper обновлять свою высоту (при включенном параметре автоматической подстройке высоты `autoHeight`) за время, равное параметру `speed`. speed - number Длительность перехода (в мс). ### swiper.updateProgress() #### Описание Пересчитывает текущий прогресс swiper. ### swiper.updateSize() #### Описание Пересчитывает размер контейнера swiper. ### swiper.updateSlides() #### Описание Пересчитывает количество слайдов и их отступы. Полезно применять после программного добавления / удаления слайдов с помощью Javascript. ### swiper.updateSlidesClasses() #### Описание Обновляет CSS-классы active/prev/next на слайдах и точках пагинации. ### swiper.use(modules) #### Описание Подключает модули Swiper во время выполнения. ## 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.js" } } ] } ``` ```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/methods-and-properties-swiper-js", "name": "Методы и свойства Swiper.js - 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.js", "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/methods-and-properties-swiper-js", "description": "Список всех доступных свойств и методов Swiper.js.", "mainEntityOfPage": { "@type": "WebPage", "url": "https://web-tolk.ru/dev/joomla-plugins/wt-jswiper/documentation/methods-and-properties-swiper-js" } } ] } ```