Методы и свойства Swiper.js

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

Категория: Плагины Joomla

Список всех доступных свойств и методов 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 во время выполнения.