Параметры Swiper — настройка слайдера для сайта JS / jQuery

Параметры Swiper — настройка слайдера для сайта JS / jQuery. Описание свойств и функций Swiper (свипер)

Swiper Полный HTML-макет слайдера на сайт

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

Инициализировать Swiper

Теперь, когда у нас есть HTML-код Swiper, нам нужно инициализировать его, используя следующую функцию:

новый Swiper ( swiperContainer , параметры ) — инициализировать swiper с опциями

  • swiperContainerHTMLElement или строка (с помощью CSS Selector) элемента HTML контейнера swiper. Необходимые.
  • Параметрыобъект — объект с параметрами Swiper. Необязательный.
  • Метод возвращает инициализированный экземпляр Swiper

Например:

var mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100
});

После инициализации Swiper можно получить доступ к экземпляру Swiper на свой HTMLElement. Это swiperсвойство элемента контейнера HTML Swiper:

var mySwiper = document.querySelector('.swiper-container').swiper

// Now you can use all slider methods like
mySwiper.slideNext();

Параметры Swiper

Давайте посмотрим на список всех доступных параметров:

параметр Тип По умолчанию Описание
в этом логический true Независимо от того, должен ли Swiper автоматически инициализироваться при создании экземпляра. Если отключено, вам необходимо запустить его вручную, вызвавmySwiper.init()
initialSlide число 0 Номер индекса начального слайда.
направление строка «Горизонтальные» Может быть «горизонтальным» или «вертикальным» (для вертикального слайдера).
скорость число 300 Продолжительность перехода между слайдами (в мс)
setWrapperSize логический false Включил эту опцию, и плагин установит ширину / высоту на обложке swiper, равную общему размеру всех слайдов. В основном следует использовать в качестве варианта совместимости для браузера, который не поддерживает флексинг-план хорошо
virtualTranslate логический false Включен этот параметр, и swiper будет работать как обычно, за исключением того, что он не будет перемещаться, реальные значения перевода на обертке не будут установлены. Полезно, когда вам может понадобиться создать пользовательский переход слайдов
ширина число Ширина swiper (в px). Параметр позволяет принудительно изменять ширину Swiper.Полезно, только если вы инициализируете Swiper, когда он скрыт.

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

Установка этого параметра заставит Swiper не реагировать
авто высота логический false Установите значение true и слайдер-обертка примет его высоту до высоты текущего активного слайда
roundLengths логический false Установите значение true для округлых значений ширины и высоты слайдов для предотвращения размытых текстов на обычных экранах разрешения (если они есть)
вложенными логический false Установите значение true на вложенном Swiper для правильного перехвата событий касания. Используйте только на вложенных swipers, которые используют то же направление, что и родительский
uniqueNavElements логический true Если включено (по умолчанию) и параметры навигационных элементов переданы как строка (например ".pagination"), то Swiper будет искать такие элементы с помощью дочерних элементов. Применяется для разбивки на страницы, предыдущие / следующие кнопки и элементы прокрутки
эффект строка ‘горка’ Эффект Tranisition. Могут быть «слайд», «выцветание», «куб», «покрытие» или «флип»,
runCallbacksOnInit логический true Fire [Transition / SlideChange] [Начало / конец] событий при инициализации swiper. Такие события будут запущены при инициализации, если ваш initialSlide не равен 0, или вы используете режим цикла
watchOverflow логический false Когда включено, Swiper отключится и скроет навигационные кнопки, если на слайдах недостаточно слайдов
на объект Регистрация обработчиков событий
Слайдовая сетка
spaceBetween число 0 Расстояние между слайдами в px.
slidesPerView число или «auto» 1 Количество слайдов на просмотр (слайды, видимые одновременно на контейнере ползунка).

Если вы используете его со значением «auto» и вместе с loop: true, вам нужно указать параметр loopedSlides с количеством слайдов до цикла (дублировать)

slidesPerView: ‘auto’ в настоящее время несовместим с многострочным режимом, когда слайдыPerColumn > 1

slidesPerColumn число 1 Количество слайдов в столбце, для многострочного макета

slidesPerColumn> 1 в настоящее время не совместим с режимом цикла ( loop: true )

slidesPerColumnFill строка «Столбец» Может быть «столбец» или «строка». Определяет, как слайды должны заполнять строки, по столбцам или по строке
slidesPerGroup число 1 Задайте количество слайдов для определения и включения группового скольжения.Полезно использовать с slidesPerView> 1
centeredSlides логический false Если true, то активный слайд будет центрироваться, а не всегда на левой стороне.
slidesOffsetBefore число 0 Добавить (в пикселях) дополнительное смещение слайда в начале контейнера (перед всеми слайдами)
slidesOffsetAfter число 0 Добавить (в пикселях) дополнительное смещение слайда в конце контейнера (после всех слайдов)
normalizeSlideIndex логический true Нормализовать индекс слайдов. См. # 1766
centerInsufficientSlides логический false Когда это разрешено, центр слайдов, если количество слайдов меньше, чем `slidesPerView`. Не предназначен для использования в loopрежиме иslidesPerColumn
Захватить курсор
grabCursor логический false Этот вариант может немного улучшить удобство работы на рабочем столе. Если true , пользователь увидит курсор «захватить» при наведении на Swiper
Прикосновения
touchEventsTarget строка ‘container’ Целевой элемент для прослушивания событий касания. Может быть «контейнером»(для прослушивания событий касания на swiper-контейнере) или «оберткой» (для прослушивания событий касания на swiper-wrapper)
touchRatio число 1 Отношение касания
touchAngle число 45 Допустимый угол (в градусах) для запуска сенсорного перемещения
simulateTouch логический true Если true, Swiper примет события мыши, такие как события касания (нажмите и перетащите, чтобы изменить слайды)
shortSwipes логический true Установите значение false, если вы хотите отключить короткие звуки
longSwipes логический true Установите значение false, если вы хотите отключить длинные прокрутки
longSwipesRatio число 0.5 Соотношение для перехода к следующему / предыдущему слайду во время длинных прокруток
longSwipesMs число 300 Минимальная длительность (в мс) для запуска прокрутки на следующий / предыдущий слайд во время длинных прокруток
followFinger логический true Если отключено, то слайдер будет анимироваться только тогда, когда вы его отпустите, он не будет двигаться, пока вы держите палец на нем
allowTouchMove логический true Если false, то единственным способом переключения слайда является использование внешних API-функций, таких как slidePrevилиslideNext
порог число 0 Пороговое значение в px. Если «расстояние касания» будет ниже этого значения, тогда swiper не будет двигаться
touchstart preventDefault логический true Если отключено, событие `touchstart` (` mousedown`) не будет предотвращено
touchMoveStopPropagation логический true Если включено, то распространение «touchmove» будет остановлено
iOSEdgeSwipeDetection логический false Разрешить выпуск событий Swiper для работы с прокруткой в ​​обратную сторону в iOS UIWebView
iOSEdgeSwipeThreshold число 20 Площадь (в пикселях) от левого края экрана, чтобы освободить события касания для перехода в обратную сторону в iOS UIWebView
touchReleaseOnEdges логический false Включить, чтобы выпустить события касания на крайнее положение ползунка (начало, конец), чтобы можно было продолжить прокрутку страницы
passiveListeners логический true Пассивные прослушиватели событий будут использоваться по умолчанию, где это возможно, для повышения производительности прокрутки на мобильных устройствах.Но если вам нужно использовать `e.preventDefault`, и у вас есть конфликт с ним, вы должны отключить этот параметр
Сопротивление касания
сопротивление логический true Установите значение false, если вы хотите отключить устойчивые границы
resistanceRatio число 0.85 Эта опция позволяет вам контролировать коэффициент сопротивления
Swiping / No swiping
preventInteractionOnTransition логический false При включении он не позволяет изменять слайды с помощью кнопок прокрутки или навигации / разбиения на страницы во время перехода
allowSlidePrev логический true Установите значение false, чтобы отключить прокрутку до предыдущего направления слайда (слева или сверху)
allowSlideNext логический true Установите значение false, чтобы отключить прокрутку до следующего направления слайда (справа или снизу)
noSwiping логический true Включить / отключить прокрутку элементов, соответствующих классу, указанному в noSwipingClass
noSwipingClass строка ‘Не Swiper-не-пролистывание’ Указать noSwipingкласс ‘s’ css
noSwipingSelector строка Может использоваться вместо noSwipingClassуказания элементов для отключения проверки. Например 'input', отключить прокрутку на всех входах
swipeHandler string / HTMLElement 0 Строка с CSS-селектором или HTML-элементом контейнера с разбивкой на страницы, которая будет работать только как доступный обработчик для прокрутки
щелчки
preventClicks логический true Установите значение true, чтобы предотвратить случайные нежелательные клики по ссылкам во время прокрутки
preventClicksPropagation логический true Установите значение true, чтобы остановить распространение событий нажатием на ссылки во время прокрутки
slideToClickedSlide логический false Установите значение true и нажмите на любой слайд, чтобы перейти к этому слайду
Freemode
freeMode логический false Если true, то слайды не будут иметь фиксированные позиции
freeModeMomentum логический true Если true , то слайд продолжит движение некоторое время после его выпуска
freeModeMomentumRatio число 1 Чем выше значение, тем больше расстояние от импульса после отпускания слайдера
freeModeMomentumVelocityRatio число 1 Более высокое значение дает большую скорость импульса после отпускания слайдера
freeModeMomentumBounce логический true Установите значение false, если вы хотите отключить отбой в свободном режиме
freeModeMomentumBounceRatio число 1 Более высокое значение вызывает более сильный импульсный эффект
freeModeMinimumVelocity число 0.02 Минимальная скорость касания, необходимая для запуска импульса свободного режима
freeModeSticky логический false Установите значение true, чтобы включить привязку к слайдам в свободном режиме
Прогресс
watchSlidesProgress логический false Включите эту функцию, чтобы рассчитать каждый прогресс слайдов
watchSlidesVisibility логический false watchSlidesProgressдолжен быть включен. Включить эту опцию и слайды, которые находятся в видовом экране, будут иметь дополнительный видимый класс
Изображений
preloadImages логический true Когда включено, Swiper заставит загружать все изображения
updateOnImagesReady логический true Когда включено, Swiper будет повторно инициализирован после загрузки всех внутренних изображений (тегов <img>). необходимыеpreloadImages: true
петля
петля логический false Установите значение true, чтобы включить режим непрерывного контура

Если вы используете его вместе с этим, slidesPerView: 'auto'вам нужно указать loopedSlidesпараметр с количеством слайдов в цикле (дубликат)

Кроме того, из-за того, как работает режим цикла, он будет добавлять дублированные слайды. Такие дублированные классы будут иметь дополнительные классы:

  • swiper-slide-duplicate — представляет собой дублированный слайд
  • swiper-slide-duplicate-active — представляет собой слайд, дублированный в текущем активном слайде
  • swiper-slide-duplicate-next — представляет слайд, дублированный слайду рядом с активным
  • swiper-slide-duplicate-prev — представляет слайд, дублированный на слайд, предшествующий активному
loopAdditionalSlides число 0 Количество добавленных слайдов, которые будут клонированы после создания цикла
loopedSlides число 0 Если вы используете slidesPerView:'auto'режим loop, вы должны сказать Swiper, сколько слайдов он должен зацикливать (дублировать), используя этот параметр
ходьба группы с заполнением пробелов логический false Режим Enable и loop заполняет группы с недостаточным количеством слайдов с пустым слайдом. Хорошо использовать с slidesPerGroupпараметром
Контрольные точки
контрольные точки объект Позволяет установить другой параметр для разных чувствительных точек останова (размеры экрана). Не все параметры могут быть изменены в контрольных точках, только те , которые не требуется различное расположение и логика, как slidesPerView, slidesPerGroup, spaceBetween. Такие параметры , как slidesPerColumn, loop, direction, effectне будут работать. Например:

var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 4,
  spaceBetween: 40,
  // Responsive breakpoints
  breakpoints: {
    // when window width is <= 320px
    320: {
      slidesPerView: 1,
      spaceBetween: 10
    },
    // when window width is <= 480px
    480: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is <= 640px
    640: {
      slidesPerView: 3,
      spaceBetween: 30
    }
  }
})
breakpointsInverse логический false Если он включен, он будет считать точки останова в обратном направлении, например, будет переопределять параметры, если ширина окна больше заданной точки останова:

var swiper = new Swiper('.swiper-container', {
  // Default parameters for smallest screen
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpointsInverse: true,
  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
    }
  }
})
наблюдатель
наблюдатель логический false Установите значение true, чтобы включить Mutation Observer на Swiper и его элементы.В этом случае Swiper будет обновляться (повторно инициализироваться) каждый раз, если вы измените его стиль (например, hide / show) или измените его дочерние элементы (например, добавление / удаление слайдов)
observeParents логический false Установите значение true, если вам также нужно посмотреть мутации для родительских элементов Swiper
Пространство имен
containerModifierClass строка ‘Swiper-container-‘ Начало модификатора CSS-класса, который может быть добавлен в swiper-контейнер в зависимости от разных параметров
slideClass строка ‘Swiper-слайд’ Имя класса слайда CSS
slideActiveClass строка ‘Swiper-slide-активный’ Имя класса CSS текущего активного слайда
slideDuplicateActiveClass строка ‘Swiper-slide-дубликат-активный’ Имя класса CSS дублированного слайда, который представляет текущий активный слайд
slideVisibleClass строка ‘Swiper-slide-видимый’ Имя класса CSS текущего видимого слайда
slideDuplicateClass строка ‘Swiper-slide-дубликат’ Имя класса CSS для слайда, дублированного режимом цикла
slideNextClass строка ‘Swiper-slide-некст’ Имя класса CSS для слайда, которое находится прямо после текущего слайда
slideDuplicateNextClass строка ‘Swiper-slide-дубликат-некст’ Имя класса CSS дублированного слайда, представляющего слайд рядом с активным слайдом
slidePrevClass строка ‘Swiper-slide-пред’ Имя класса CSS для слайда, которое находится прямо перед активным слайдом
slideDuplicatePrevClass строка ‘Swiper-slide-дубликат-пред’ Имя класса CSS дублированного слайда, представляющего слайд, предшествующий активному слайду
wrapperClass строка ‘Swiper-обертка’ Имя класса CSS для слайдов

Методы ползунка и свойства

После инициализации Slider у нас есть свой инициализированный экземпляр в переменной (аналогично mySwiperпеременной в примере выше) с полезными методами и свойствами:

свойства
mySwiper.params Объект с переданными параметрами инициализации
mySwiper. $ Элемент Dom7 с элементом HTML-контейнера слайдера. Чтобы использовать HTML-элемент ванилиmySwiper.el
mySwiper. $ wrapperEl Элемент Dom7 с элементом HTML-слайдера. Чтобы использовать HTML-элемент ванилиmySwiper.wrapperEl
mySwiper.slides Массив-подобный набор слайдов HTML-элементов. Чтобы использовать конкретный слайд HTMLElementmySwiper.slides[1]
mySwiper.width Ширина контейнера
mySwiper.height Высота контейнера
mySwiper.translate Текущее значение wrapper translate
mySwiper.progress Текущий ход перевода оболочки (от 0 до 1)
mySwiper.activeIndex Номер индекса текущего активного слайда

Обратите внимание, что в режиме цикла активное значение индекса всегда будет сдвигаться на несколько зацикленных / дублированных слайдов

mySwiper.realIndex Номер индекса текущего активного слайда с учетом дублированных слайдов в режиме цикла
mySwiper.previousIndex Номер индекса ранее активного слайда
mySwiper.isBeginning true, если слайдер находится в большинстве положений «влево» / «сверху»
mySwiper.isEnd true, если слайдер находится на самом «правом» / «нижнем» положении
mySwiper.animating true, если swiper находится в процессе перехода
mySwiper.touches Объект со следующими свойствами события касания:

  • mySwiper.touches.startX
  • mySwiper.touches.startY
  • mySwiper.touches.currentX
  • mySwiper.touches.currentY
  • mySwiper.touches.diff
mySwiper.clickedIndex Номер индекса последнего щелкнутого слайда
mySwiper.clickedSlide Ссылка на последний щелчок слайда ( HTMLElement )
mySwiper.allowSlideNext Отключить / включить возможность перехода на следующие слайды путем назначения false/ trueэтому свойству
mySwiper.allowSlidePrev Отключить / включить возможность перехода на предыдущие слайды путем назначения false/ trueэтому свойству
mySwiper.allowTouchMove Отключить / включить способность перемещать слайдер, захватив его мышью или прикоснуться к нему пальцем (на сенсорных экранах), назначив false/ trueэтому свойству
методы
mySwiper.slideNext ( скорость , runCallbacks ); Запустить переход к следующему слайду

  • speednumber — продолжительность перехода (в мс). Необязательный
  • runCallbacksboolean — установите его false(по умолчанию это true), и переход не приведет к событиям перехода. Необязательный
mySwiper.slidePrev ( скорость , runCallbacks ); Запустить переход к предыдущему слайду

  • speednumber — продолжительность перехода (в мс). Необязательный
  • runCallbacksboolean — установите его false(по умолчанию это true), и переход не приведет к событиям перехода. Необязательный
mySwiper.slideTo ( индекс , скорость , runCallbacks ); Запустите переход на слайд с номером индекса, равным параметру ‘index’, на длительность, равную параметру «скорость».

  • indexnumber — индексный номер слайда
  • speednumber — продолжительность перехода (в мс). Необязательный
  • runCallbacksboolean — установите его false(по умолчанию это true), и переход не приведет к событиям перехода. Необязательный
mySwiper.slideToLoop ( индекс , скорость , runCallbacks ); То же самое, что и .slideTo, но для случая, когда используется с включенным loop.Таким образом, этот метод будет скользить до слайдов с realIndexсовпадениемindex

  • indexnumberномер индекса исходного слайда
  • speednumber — продолжительность перехода (в мс). Необязательный
  • runCallbacksboolean — установите его false(по умолчанию это true), и переход не приведет к событиям перехода. Необязательный
mySwiper.slideReset ( скорость , runCallbacks ); Сбросьте положение swiper на текущий активный слайд на время, равное параметру «скорость».

  • speednumber — продолжительность перехода (в мс). Необязательный
  • runCallbacksboolean — установите его false(по умолчанию это true), и переход не приведет к событиям перехода. Необязательный
mySwiper.slideToClosest ( скорость , runCallbacks ); Сбросьте положение переключателя до ближайшей точки слайда / привязки на длительность, равную параметру «скорость».

  • speednumber — продолжительность перехода (в мс). Необязательный
  • runCallbacksboolean — установите его false(по умолчанию это true), и переход не приведет к событиям перехода. Необязательный
mySwiper.updateAutoHeight ( скорость ); Force swiper обновить его высоту (при включенном autoHeight) на длительность eqaul до параметра «скорость»

  • speednumber — продолжительность перехода (в мс). Необязательный
  • runCallbacksboolean — установите его false(по умолчанию это true), и переход не приведет к событиям перехода. Необязательный
mySwiper.update (); Вы должны вызвать его после того, как вы добавите / удалите слайды вручную или после того, как вы скроете / покажите его или внесите какие-либо пользовательские изменения DOM с помощью Swiper

Этот метод также включает подкачку следующих методов, которые вы можете использовать отдельно:

  • mySwiper.updateSize () — пересчитать размер контейнера swiper
  • mySwiper.updateSlides () — пересчитать количество слайдов и их смещений. Полезно после добавления / удаления слайдов с помощью JavaScript
  • mySwiper.updateProgress () — пересчет прогресса swiper
  • mySwiper.updateSlidesClasses () — обновляет активные / предыдущие / следующие классы на слайдах и марках
mySwiper.detachEvents (); Отключить прослушиватели всех событий
mySwiper.attachEvents (); Atach все события слушатели снова
mySwiper.destroy ( deleteInstance , cleanStyles ); Уничтожьте экземпляр слайдера и отключите прослушиватели всех событий, где

  • deleteInstanceboolean — установить его false(по умолчанию это true), чтобы не удалять экземпляр Swiper
  • cleanStylesboolean — установите его true(по умолчанию это true), и все пользовательские стили будут удалены из слайдов, обертки и контейнера. Полезно, если вам нужно уничтожить Swiper и снова запустить с новыми параметрами или в другом направлении
mySwiper.appendSlide ( слайды ); Добавьте новые слайды в конец. slidesможет быть HTMLElement или HTML-строка с новым слайдом или массивом с такими слайдами, например:

mySwiper.appendSlide('<div class="swiper-slide">Slide 10"</div>')
mySwiper.appendSlide([
   '<div class="swiper-slide">Slide 10"</div>',
   '<div class="swiper-slide">Slide 11"</div>'
]);
mySwiper.prependSlide ( слайды ); Добавьте новые слайды в начало. slidesможет быть HTMLElement или HTML-строка с новым слайдом или массивом с такими слайдами, например:

mySwiper.prependSlide('<div class="swiper-slide">Slide 0"</div>')
mySwiper.prependSlide([
   '<div class="swiper-slide">Slide 1"</div>',
   '<div class="swiper-slide">Slide 2"</div>'
]);
mySwiper.addSlide ( индекс , слайды ); Добавьте новые слайды в требуемый индекс. slidesможет быть HTMLElement или HTML-строка с новым слайдом или массивом с такими слайдами, например:

mySwiper.addSlide(1, '<div class="swiper-slide">Slide 10"</div>')
mySwiper.addSlide(1, [
   '<div class="swiper-slide">Slide 10"</div>',
   '<div class="swiper-slide">Slide 11"</div>'
]);
mySwiper.removeSlide ( slideIndex ); Удалите выбранные слайды. slideIndexможет быть числом с индексом слайда для удаления или массива с индексами, например:

mySwiper.removeSlide(0); //remove first slide
mySwiper.removeSlide([0, 1]); //remove first and second slides
mySwiper.removeAllSlides (); Удалить все слайды
mySwiper.setTranslate ( перевод ); Задайте значение трансформированного значения css3 transform для swiper-оболочки
mySwiper.getTranslate (); Получить текущее значение swiper wrapper css3 transform translate
mySwiper.on ( событие , обработчик ) Добавить прослушиватель событий
mySwiper.once ( событие , обработчик ) Добавить прослушиватель событий, который будет выполняться только один раз
mySwiper.off ( событие , обработчик ) Удалить прослушиватель событий для указанного события
mySwiper.off ( событие ) Удалить всех слушателей для указанного события
mySwiper.unsetGrabCursor (); Отменить захват курсора
mySwiper.setGrabCursor (); Установить захват курсора

События

Swiper поставляется с кучей полезных событий, которые вы можете слушать. События могут быть назначены двумя способами:

  1. Использование onпараметра для инициализации swiper:
    var mySwiper = new Swiper('.swiper-container', {
      // ...
      on: {
        init: function () {
          console.log('swiper initialized');
        },
      },
    };
  2. Использование onметода после инициализации swiper.
    var mySwiper = new Swiper('.swiper-container', {
      // ...
    };
    mySwiper.on('slideChange', function () {
      console.log('slide changed');
    });

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

 

Название события аргументы Описание
в этом Событие будет запущено сразу после инициализации Swiper. Обратите внимание, что с swiper.on('init')синтаксисом он будет работать только в том случае, если вы установите init: falseпараметр:

var swiper = new Swiper('.swiper-container', {
  init: false,
  // other parameters
})
swiper.on('init', function() { /* do something */ });
// init Swiper
swiper.init();

В противном случае используйте его как параметр:

var swiper = new Swiper('.swiper-container', {
  // other parameters
  on: {
    init: function () {
      /* do something */
    },
  }
});
beforeDestroy Событие будет выпущено прямо перед тем, как Swiper уничтожит
slideChange Событие будет запущено при изменении текущего слайда
slideChangeTransitionStart Событие будет запущено в начале анимации на другой слайд (следующий или предыдущий).
slideChangeTransitionEnd Событие будет запущено после анимации на другой слайд (следующий или предыдущий).
slideNextTransitionStart То же, что и «slideChangeTransitionStart», но только для «прямого» направления
slideNextTransitionEnd То же, что и «slideChangeTransitionEnd», но только для «прямого» направления
slidePrevTransitionStart То же, что и «slideChangeTransitionStart», но только для «обратного» направления
slidePrevTransitionEnd То же, что и «slideChangeTransitionEnd», но только для «обратного» направления
transitionStart Событие будет запущено в начале перехода.
transitionEnd Событие будет запущено после перехода.
touchStart событие Событие будет запущено, когда пользователь коснется Swiper. Получает событие «touchstart» в качестве аргумента.
TouchMove (событие) событие Событие будет запущено, когда пользователь коснется и переместит палец над Swiper. Получает событие «touchmove» в качестве аргумента.
touchMoveOpposite событие Событие будет запущено, когда пользователь коснется и переместит палец по Swiper в направлении, противоположном directionпараметру. Получает событие «touchmove» в качестве аргумента.
sliderMove событие Событие будет запущено, когда пользователь коснется и переместит палец по Swiper и переместит его. Получает событие «touchmove» в качестве аргумента.
touchEnd событие Событие будет запущено, когда пользователь выпустит Swiper. Получает событие «коснуться» в качестве аргумента.
щелчок событие Событие будет запущено, когда пользователь нажимает / нажимает на Swiper после 300 мс задержки. Получает событие «коснуться» в качестве аргумента.
нажмите событие Событие будет запущено, когда пользователь нажимает / нажимает на Swiper. Получает событие «коснуться» в качестве аргумента.
двойное нажатие событие Событие будет запущено, когда пользователь дважды коснется контейнера Swiper. Получает событие «коснуться» в качестве аргумента
imagesReady Событие будет запущено сразу после загрузки всех внутренних изображений. updateOnImagesReadyтакже должно быть включено
прогресс прогресс Событие будет запущено, когда прогресс Swiper будет изменен, в качестве аргументов он получит прогресс,который всегда от 0 до 1
reachBeginning Событие будет запущено, когда Swiper достигнет своего начала (исходное положение)
reachEnd Событие будет запущено, когда Swiper достигнет последнего слайда
fromEdge Событие будет запущено, когда Swiper перейдет из положения beginningили endпозиции
набор опаздывает переведите Событие будет запущено, когда обертка swiper изменит свою позицию. Получает текущее значение перевода как аргумент
набор Тиона переход Событие будет запускаться каждый раз, когда swiper начинает анимацию. Получает текущую продолжительность перехода (в мс) в качестве аргументов
изменить размер Событие будет запущено при изменении размера окна прямо перед обработкой onresize swiper

Компоненты

параметр Тип По умолчанию Описание
навигация объект Объект с параметрами навигации. Например:

var mySwiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
{
Nextel string / HTMLElement 0 Строка с CSS-селектором или HTML-элементом элемента, который будет работать как «следующая» кнопка после нажатия на нее
Prevel string / HTMLElement 0 Строка с селектором CSS или элементом HTML элемента, который будет работать как кнопка «prev» после нажатия на нее
hideOnClick логический false Переключить видимость навигационных кнопок после щелчка по контейнеру Slider
disabledClass строка ‘Swiper кнопки-инвалидов’ Имя класса CSS добавлено в навигационную кнопку, когда она отключается
hiddenClass строка «Swiper кнопка скрытая» Имя класса CSS добавлено в навигационную кнопку, когда она становится скрытой.
}
свойства
mySwiper.navigation.nextEl HTMLElement «следующей» кнопки навигации
mySwiper.navigation.prevEl HTML-элемент «предыдущей» кнопки навигации
методы
mySwiper.navigation.update (); Обновление состояния кнопок навигации (включено / отключено)

пагинация

Параметры разбивки на страницы

параметр Тип По умолчанию Описание
пагинация объект Объект с параметрами навигации. Например:

var mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
});
{
эль строка 0 Строка с CSS-селектором или HTML-элементом контейнера с разбивкой на страницы
тип строка «пуля» Строка с типом разбивки на страницы. Могут быть «пули», «фракция», «прогресс» или «обычай»,
bulletElement строка «Пролет» Определяет, какой HTML-тег будет использоваться для представления одиночной пуговицы. Только для тиснения патронов .
dynamicBullets логический false Хорошо, если вы используете палитрами с большим количеством слайдов. Таким образом, одновременно будет отображаться только несколько пуль.
dynamicMainBullets число 1 Количество основных пуль, видимых при включении динамических буферов .
hideOnClick логический true Переключить (скрыть / истинный) видимость контейнера для страниц после щелчка по контейнеру Slider
кликабельны логический false Если true, то нажатие на кнопку pagination приведет к переходу на соответствующий слайд. Только для тиснения патронов
progressbarOpposite логический false Делает контрольный шаг разбиения на страницы, противопоfalse параметру «направление» Swiper, означает вертикальную панель прогресса для горизонтального направления поворотника и горизонтальную панель прогресса для вертикального поворота swiper
formatFractionCurrent Функция (номер) number => number Пользовательский формат. Функция получает текущий номер, и вам нужно вернуть форматированное значение
formatFractionTotal Функция (номер) number => number Общее число разбивочных разбиений на страницы. Функция получает общее количество, и вам нужно вернуть отформатированное значение
renderBullet function (index, className) 0 Этот параметр позволяет полностью настраивать пагинальные маркеры , вам нужно передать здесь функцию, которая принимает номер индекса пулинга и требуемое имя класса элемента ( className ). Только для пуль тисненияНапример, с помощью этого кода мы можем добавить число слайдов в пулирование:

var swiper = new Swiper('.swiper-container', {
  //...
  renderBullet: function (index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});
renderFraction function (currentClass, totalClass) 0 Этот параметр позволяет настроить «фракцию» pagination html. Только для типа разбивки на фракцииНапример:

var swiper = new Swiper('.swiper-container', {
  //...
  renderFraction: function (currentClass, totalClass) {
      return '<span class="' + currentClass + '"></span>' +
             ' of ' +
             '<span class="' + totalClass + '"></span>';
  }
});
renderProgressbar Функция (progressbarFillClass) 0 Этот параметр позволяет настроить разбивку страницы «прогресс». Только дляпрогресса типа постраничногоНапример:

var swiper = new Swiper('.swiper-container', {
  //...
  renderProgressbar: function (progressbarFillClass) {
      return '<span class="' + progressbarFillClass + '"></span>';
  }
});
renderCustom функция (swiper, current, total) 0 Этот параметр требуется для настраиваемого типа разбивки на страницы, где вы должны указать, как он должен отображатьсяНапример:

var swiper = new Swiper('.swiper-container', {
  //...
  renderCustom: function (swiper, current, total) {
      return current + ' of ' + total;
  }
});
bulletClass строка ‘Swiper-пагинация-пуля’ Имя класса CSS для одиночной пагинальной пули
bulletActiveClass строка ‘Swiper-пагинация-пуля-активный’ Имя класса CSS в настоящее время активной пуговичной пули
modifierClass строка ‘Swiper-pagination-‘ Начало имени класса CSS-модификатора, которое будет добавлено к разбивке на страницы в зависимости от параметров
currentClass строка ‘Swiper-пагинация тока’ Имя класса CSS для элемента с текущим активным индексом в разбивке на фрагменты
общий класс строка ‘Swiper-пагинация итог’ Имя класса CSS элемента с общим количеством «привязок» в разбивке на «фракцию»
hiddenClass строка ‘Swiper-пагинация-скрытый’ Имя класса CSS для разбивки на страницы, когда оно становится неактивным
progressbarFillClass строка ‘Swiper-пагинация-прогрессбар-заливка’ Имя класса CSS элемента заполнения пробивки страницы
clickableClass строка ‘Swiper-пагинация интерактивная’ Имя класса CSS, заданное для разбивки на страницы, когда оно доступно для кликов
}

Методы и свойства разбиения на страницы

свойства
mySwiper.pagination.el HTMLElement элемента контейнера разбиения на страницы
mySwiper.pagination.bullets Dom7 массив-подобный набор фрагментов палитирующих элементов HTML. Чтобы использовать конкретный слайд HTMLElementmySwiper.pagination.bullets[1]
методы
mySwiper.pagination.render (); Рендеринг макета страницы
mySwiper.pagination.update (); Обновить состояние разбивки на страницы (включено / отключено / активно)

События разбиения на страницы

Название события аргументы Описание
нумерация страниц визуализации swiper, paginationEl Событие будет запущено после отображения разбивки на страницы
обновление пагинация swiper, paginationEl Событие будет запущено при обновлении страницы.

Полоса прокрутки

Параметры прокрутки

параметр Тип По умолчанию Описание
полоса прокрутки объект Объект с параметрами полосы прокрутки. Например:

var mySwiper = new Swiper('.swiper-container', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});
{
эль string / HTMLElement 0 Строка с CSS-селектором или HTML-элементом контейнера с полосой прокрутки.
скрывать логический true Скрыть полосу прокрутки автоматически после взаимодействия с пользователем
перетаскиваемый логический false Установите значение true, чтобы включить перетаскивание полосы прокрутки, которая позволяет вам управлять положением ползунка
snapOnRelease логический false Установите значение true, чтобы привязать ползунок к слайдам при отпускании полосы прокрутки
dragSize Строка / номер ‘auto’ Размер перетаскиваемого элемента прокрутки в px
lockClass строка ‘Swiper-полоса прокрутки-замок’ Элемент CSS класса прокрутки добавляет дополнительный класс CSS, если он отключен
dragClass строка ‘Swiper-прокрутки перетаскивание’ Перетаскиваемый элемент прокрутки
}

Методы и свойства прокрутки

свойства
mySwiper.scrollbar.el HTMLElement элемента контейнера прокрутки
mySwiper.scrollbar.dragEl Элемент HTMLElement элемента управления перетаскиванием прокрутки
методы
mySwiper.scrollbar.updateSize (); Обновляет дорожки прокрутки и размеры обработчиков

Автовоспроизведение

Параметры автовоспроизведения

параметр Тип По умолчанию Описание
Автовоспроизведение объект / логический Объект с параметрами автовоспроизведения или boolean true для включения с настройками по умолчанию. Например:

var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 5000,
  },
});
{
задержка число 3000 Задержка между переходами (в мс). Если этот параметр не указан, автоматическое воспроизведение будет отключено

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

<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000">
stopOnLastSlide логический false Включить этот параметр, и автовоспроизведение будет остановлено, когда оно достигнет последнего слайда (не действует в режиме цикла)
disableOnInteraction логический true Установите значение false, и автоматическое воспроизведение не будет отключено после взаимодействия пользователя (swipes), оно будет перезапущено каждый раз после взаимодействия
обратное направление логический false Включает автовоспроизведение в обратном направлении
waitForTransition логический true Когда включено, автовоспроизведение будет ждать перехода оболочки для продолжения. Может быть отключен в случае использования виртуального Перевести, когда ваш слайдер может не иметь переход
}

Способы и свойства автовоспроизведения

свойства
mySwiper.autoplay.running Включить и запустить автозапуск
методы
mySwiper.autoplay.start (); Начать автозапуск
mySwiper.autoplay.stop (); Остановить автовоспроизведение

События автовоспроизведения

Название события аргументы Описание
autoplayStart Событие будет запущено при запуске автозапуска
autoplayStop Событие будет запущено при остановке автозапуска
Автовоспроизведение Событие будет запущено при смене слайдов с автозапуском

параллакс

Swiper поддерживает эффекты перехода параллакса для вложенных элементов swiper / slides. Поддерживаются два типа элементов параллакса:

  • Прямые дочерние элементы swiper-container. Параллакс-эффект для таких элементов будет зависеть от общего хода ползунка. Полезно для фона параллакса
  • Слайды дочерних элементов. Параллакс-эффект для таких элементов будет зависеть от прогресса слайдов

Чтобы включить эффекты параллакса, вам необходимо инициализировать Swiper с переданным parallax:trueпараметром и добавить один из следующих (или смешать) атрибутов к требуемым элементам:

  • data-swiper-parallax— включить трансляционный переход параллакса. Этот атрибут может принимать:
    • number — value in px (как для заголовка, субтитров в примере выше) для перемещения элемента в зависимости от прогресса. В этом случае такой элемент будет перемещаться на ± это значение в px в зависимости от положения слайда (следующего или предыдущего)
    • процент — (как для «parallax-bg») для перемещения элемента в зависимости от прогресса и его размера. В этом случае такой элемент будет перемещаться на ± этот процент от его размера (ширина в горизонтальном направлении и высота в вертикальном направлении) в зависимости от положения слайда (следующего или предыдущего). Поэтому, если элемент имеет ширину 400 пикселей, и вы указали данные-swiper-parallax = «50%», то он будет перемещен на ± 200 пикселей
  • data-swiper-parallax-x — то же, но для направления оси х
  • data-swiper-parallax-y — то же, но для направления оси Y
  • data-swiper-parallax-scale — коэффициент масштабирования элемента параллакса, когда он находится в состоянии «неактивного» (не на активном слайде)
  • data-swiper-parallax-opacity — непрозрачность элемента параллакса, когда он находится в состоянии «неактивный» (не на активном слайде)
  • data-swiper-parallax-duration — пользовательская продолжительность перехода для элементов параллакса
<div class="swiper-container">
    <!-- Parallax background element -->
    <div
        class="parallax-bg"
        style="background-image:url(http://lorempixel.com/900/600/nightlife/2/)"
        data-swiper-parallax="-23%">
    </div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <!-- Each slide has parallax title -->
            <div class="title" data-swiper-parallax="-100">Slide 1</div>
            <!-- Parallax subtitle -->
            <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
            <!-- And parallax text with custom transition duration -->
            <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
              <p>Lorem ipsum dolor sit amet, ...</p>
            </div>
            <!-- Opacity parallax -->
            <div data-swiper-parallax-opacity="0.5" >I will change opacity</div>
            <!-- Scale parallax -->
            <div data-swiper-parallax-scale="0.15" >I will change scale</div>
        </div>
        ...
    </div>
</div>

Параллаксные параметры

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

Ленивая загрузка

Чтобы включить ленивую загрузку, в первую очередь нам нужна специальная компоновка для изображений или элементов с фоновой подсветкой в ​​слайдах:

<div class="swiper-container">
    <div class="swiper-wrapper">

        <!-- Lazy image -->
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>

        <!-- Lazy image with srscet-->
        <div class="swiper-slide">
            <img data-src="path/to/logo-small.png" data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>

        <!-- Element with lazy background image -->
        <div class="swiper-slide">
            <div data-background="path/to/picture-2.jpg" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
        </div>

        <!-- Lazy background image on slide itself -->
        <div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>
</div>

Как вы видите:

  • Каждое ленивое загруженное изображение / элемент должно иметь дополнительный класс «swiper-lazy»
  • Ленивый источник изображения для элемента <img> должен быть указан в атрибуте «data-src» вместо «src»
  • Lazy image source для элемента <img> должен быть указан в атрибуте data-srcset вместо «srcset»
  • В атрибуте «данные-фон» должен указываться ленивый источник фонового изображения

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

<div class="swiper-lazy-preloader"></div>

Или белый-один для темного макета:

<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

После этого нам нужно включить ленивую загрузку при инициализации Swiper:

var swiper = new Swiper('.swiper-container', {
    // Disable preloading of all images
    preloadImages: false,
    // Enable lazy loading
    lazy: true
});

Если вы используете slidesPerView «auto» или slidesPerView> 1, тогда вы также должны включить функцию watchSlidesVisibility,а Swiper загрузит изображения в видимых в настоящее время слайдах

Параметры ленивой загрузки

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

var mySwiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true,
  },
});
{
loadPrevNext логический false Установите значение «true», чтобы включить ленивую загрузку для изображений ближайших слайдов (для предыдущих и следующих изображений слайдов)
loadPrevNextAmount число 1 Количество следующих / превью для предварительной загрузки ленивых изображений. Не может быть меньше slidesPerView
loadOnTransitionStart логический false По умолчанию Swiper будет загружать ленивые изображения после перехода на этот слайд, поэтому вы можете включить этот параметр, если вам нужно, чтобы начать загрузку нового изображения в начале перехода
класс элементов строка ‘Swiper-ленивые’ Имя класса CSS для ленивого элемента
loadingClass строка ‘Swiper-ленивая загрузка’ Имя класса CSS для ленивого загрузочного элемента
loadedClass строка ‘Swiper-ленивым-нагруженный’ Имя класса CSS для ленивого загруженного элемента
preloaderClass строка ‘Swiper-ленивый-прелоадер’ Имя класса CSS ленивого предварительного загрузчика
}

Предельные методы и свойства загрузки

методы
mySwiper.lazy.load (); Загрузка / обновление ленивых изображений на основе текущего состояния ползунка (позиция)
mySwiper.lazy.loadInSlide ( индекс ); Сила для загрузки ленивых изображений в слайде указанным индексом

  • indexnumber — индексный номер слайда для загрузки ленивых изображений в

Ожидаемые загрузки

Название события аргументы Описание
lazyImageLoad slideEl, imageEl Событие будет запущено в начале ленивой загрузки изображения
lazyImageReady slideEl, imageEl Событие будет запущено при загрузке ленивого загружаемого изображения

Эффект Fade

Параметры Fade Effect

Обязательно установите параметр `effect` для` fade`, чтобы это работало.

параметр Тип По умолчанию Описание
fadeEffect объект Объект с параметрами Fade-effect. Например:

var mySwiper = new Swiper('.swiper-container', {
  fadeEffect: {
    crossFade: true
  },
});
{
Crossfade логический false Включает переходы слайдов
}

Эффект Coverflow

Параметры эффекта Coverflow

Убедитесь, что параметр `effect` установлен в` coverflow`, чтобы это работало.

параметр Тип По умолчанию Описание
coverflowEffect объект Объект с параметрами эффекта Coverflow. Например:

var mySwiper = new Swiper('.swiper-container', {
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
  },
});
{
slideShadows логический true Включает слайды
вращаться число 50 Слайд вращается в градусах
протяжение число 0 Протяжьте пространство между слайдами (в px)
глубина число 100 Смещение глубины в px (слайды переводятся по оси Z)
изменение число 1 Эффект множественный
}

Эффект отражения

Параметры эффекта переворота

Обязательно установите параметр `effect` для` flip`, чтобы это работало.

параметр Тип По умолчанию Описание
flipEffect объект Объект с параметрами флип-эффекта. Например:

var mySwiper = new Swiper('.swiper-container', {
  flipEffect: {
    rotate: 30,
    slideShadows: false,
  },
});
{
slideShadows логический true Включает слайды
limitRotation логический true Предельное вращение ползунков
}

Эффект куба

Параметры эффекта куба

Убедитесь, что параметр `effect` установлен в` cube`, чтобы это работало.

параметр Тип По умолчанию Описание
cubeEffect объект Объект с параметрами эффекта куба. Например:

var mySwiper = new Swiper('.swiper-container', {
  cubeEffect: {
    slideShadows: false,
  },
});
{
slideShadows логический true Включает слайды
тень логический true Включает основную слайдерную тень
shadowOffset число 20 Основное смещение тени в px
shadowScale число 0.94 Основное соотношение теней
}

Недурно

В дополнение к компоненту Controller Swiper поставляется с компонентом Thumbs, который предназначен для работы с дополнительным пальцем swiper более правильным способом, чем контроллер, который используется для синхронизации двух sweepers.

Параметры большого пальца

параметр Тип По умолчанию Описание
превью объект Объект с параметрами компонента большого пальца. Например:

var mySwiper = new Swiper('.swiper-container', {
  ...
  thumbs: {
    swiper: thumbsSwiper
  }
});
{
Swiper объект
Swiper
Swiper-экземпляр swiper, используемый как большие пальцы или объект с параметрами Swiper для инициализации swiper. Например:

var thumbsSwiper = new Swiper('.swiper-container-thumbs', {
  slidesPerView: 5,
});

var mySwiper = new Swiper('.swiper-container', {
  ...
  thumbs: {
    swiper: thumbsSwiper
  }
});

или же

var mySwiper = new Swiper('.swiper-container', {
  ...
  thumbs: {
    swiper: {
      el: '.swiper-container-thumbs',
      slidesPerView: 5,
      ...
    }
  }
});
slideThumbActiveClass строка ‘Swiper-slide-палец-активный’ Дополнительный класс, который будет добавлен к активированному слайду swiper slide
thumbsContainerClass строка ‘Swiper-контейнером большие пальцы’ Дополнительный класс, который будет добавлен в большой палец swiper-container
}

Методы и свойства Thumbs

свойства
mySwiper.thumbs.swiper Свипперский экземпляр пальцев swiper

Увеличить

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

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="path/to/image1.jpg">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="path/to/image2.jpg">
            </div>
        </div>
        <div class="swiper-slide">Plain slide with text</div>
        <div class="swiper-slide">
            <!-- Override maxRatio parameter -->
            <div class="swiper-zoom-container" data-swiper-zoom="5">
                <img src="path/to/image1.jpg">
            </div>
        </div>
    </div>
</div>

Все «масштабируемые» изображения должны быть обернуты с помощью swiper-zoom-containerкласса div . Обратите внимание: он не поддерживает масштабирование всего остального, кроме одного изображения.

Вы можете переопределить maxRatioпараметр для определенных слайдов, используя data-swiper-zoomатрибут в контейнере масштабирования.

Параметры масштабирования

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

var mySwiper = new Swiper('.swiper-container', {
  zoom: {
    maxRatio: 5,
  },
});
{
maxRatio число 3 Максимальный множитель увеличения изображения
minRatio число 1 Умножитель минимального изображения
тумблер логический true Включение и отключение масштабирования двойным нажатием слайда
containerClass строка ‘Swiper-zoom-контейнер’ Имя класса CSS для масштабирования
zoomedSlideClass строка ‘Swiper-slide-увеличенный’ Имя класса CSS увеличенного в контейнере
}

Методы масштабирования и свойства

свойства
mySwiper.zoom.enabled Включен ли модуль масштабирования
mySwiper.zoom.scale Коэффициент масштабирования текущего изображения
методы
mySwiper.zoom.enable (); Включить модуль масштабирования
mySwiper.zoom.disable (); Отключить модуль масштабирования
mySwiper.zoom.in(); Увеличить изображение текущего активного слайда
mySwiper.zoom.out (); Уменьшить изображение текущего активного слайда
mySwiper.zoom.toggle (); Переключить масштабирование изображения текущего активного слайда

Управление клавиатурой

Параметры управления клавиатурой

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

var mySwiper = new Swiper('.swiper-container', {
  keyboard: {
    enabled: true,
    onlyInViewport: false,
  },
});
{
включен логический false Установите значение true, чтобы включить управление клавиатурой
onlyInViewport логический true При включении он будет управлять ползунками, которые в настоящее время находятся в режиме просмотра
}

Методы и свойства клавиатуры

свойства
mySwiper.keyboard.enabled Включено ли управление клавиатурой
методы
mySwiper.keyboard.enable (); Включить управление клавиатурой
mySwiper.keyboard.disable (); Отключить управление клавиатурой

Управление мышью

Параметры управления мышью

параметр Тип По умолчанию Описание
колесико мыши объект / логический false Включает навигацию через слайды с помощью колеса мыши. Объект с параметрами mousewheel или boolean true для включения с настройками по умолчанию. Например:

var mySwiper = new Swiper('.swiper-container', {
  mousewheel: {
    invert: true,
  },
});
{
forceToAxis логический false Установите значение true, чтобы заставить колесики мыши двигаться к оси. Таким образом, в горизонтальном режиме колесико будет работать только с горизонтальной прокруткой колесика мыши и только с вертикальной прокруткой в ​​вертикальном режиме.
releaseOnEdges логический false Установите значение true, и swiper освободит событие mousewheel и позволит прокручивать страницу, когда swiper находится в крайних положениях (в начале или в конце)
инвертировать логический false Установите значение true, чтобы инвертировать направление скольжения
чувствительность число 1 Множитель данных колесика мыши позволяет настраивать чувствительность колесика мыши
eventsTarged string / HTMLElement ‘container’ Строка с CSS-селектором или HTML-элементом контейнера, принимающим события мыши. По умолчанию это swiper-контейнер
}

Методы и свойства Mousewheel

свойства
mySwiper.mousewheel.enabled Включено ли управление колесиком мыши
методы
mySwiper.mousewheel.enable (); Включить управление колесиком мыши
mySwiper.mousewheel.disable (); Отключить управление колесиком мыши

Виртуальные слайды

Модуль Virtual Slides позволяет сохранять необходимое количество слайдов в DOM. Это очень полезно с точки зрения производительности и памяти, если у вас много слайдов, особенно слайдов с тяжелым деревом DOM или изображениями.

Обратите внимание, что в соответствии с реализацией Virtual Slides он не работает с loopрежимом, slidesPerRowболее 1 иslidesPerView: 'auto'

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

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

var mySwiper = new Swiper('.swiper-container', {
  virtual: {
    slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
  },
});
{
слайды массив [] Массив со слайдами
кэш логический true Включает кеш DOM для рендеринга слайдов элементов html. После их рендеринга они будут сохранены в кеш и повторно использованы из него.
renderSlide функция (слайд ,индекс ) 0 Функция отображения слайдов. В качестве аргумента он принимает текущий элемент слайда для slidesмассива и индексного номера текущего слайда. Функция должна возвращать HTML-файл outper.
renderExternal Функция (данные) 0 Функция для внешнего рендеринга (например, с использованием какой-либо другой библиотеки для обработки DOM-манипуляций и состояния типа React.js или Vue.js). В качестве аргумента он принимает объект данных со следующими свойствами:

  • offset — слайд слева / верхнее смещение в px
  • from — индекс первого слайда, который должен отображаться
  • to — указатель последнего слайда, который должен отображаться
  • slides — массив с предметами слайда, которые будут отображаться
addSlidesBefore число 0 Увеличивает количество предварительно созданных слайдов перед активным слайдом
addSlidesAfter число 0 Увеличивает количество предварительно созданных слайдов после активного слайда
}

Виртуальные слайды Методы и свойства

свойства
mySwiper.virtual.cache Объект с кэшированными слайдами HTML-элементов
mySwiper.virtual.from Индекс первого отображаемого слайда
mySwiper.virtual.to Индекс последнего отображаемого слайда
mySwiper.virtual.slides Массив с предметами слайдов, переданными virtual.slidesпараметром
методы
mySwiper.virtual.appendSlide ( слайд ); Добавить слайд
mySwiper.virtual.prependSlide ( слайд ); Подготовить слайд
mySwiper.virtual.update (); Обновление состояния вирутальных слайдов

renderExternal Example

renderExternal позволяет обходить показ слайдов другим библиотекам и может быть супер удобно с такими библиотеками, как React.js и Vue.js

С Vue.js

<template>
  <!-- ... -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <!-- It is important to set "left" style prop on every slide -->
      <div class="swiper-slide"
        v-for="(slide, index) in virtualData.slides"
        :key="index"
        :style="{left: `${virtualData.offset}px`}"
      >{{slide}}</div>
    </div>
  </div>
  <!-- ... -->
</template>
<script>
  import Swiper from 'swiper/dist/js/swiper.esm.bundle';

  export default {
    data() {
      return {
        // dummy slides data
        slides: (function () {
          var slides = [];
          for (var i = 0; i < 600; i += 1) {
            slides.push('Slide ' + (i + 1));
          }
          return slides;
        }()),
        // virtual data
        virtualData: {
          slides: [],
        },
      }
    },
    mounted() {
      const self = this;
      const swiper = new Swiper('.swiper-container', {
        // ...
        virtual: {
          slides: self.slides,
          renderExternal(data) {
            // assign virtual slides data
            self.virtualData = data;
          },
        },
      });
    },
  };
</script>

С React.js

import React from 'react';
import Swiper from 'swiper/dist/js/swiper.esm.bundle';

export default class extends React.Component {
  constructor() {
    this.state = {
      // dummy slides data
      slides: (function () {
        var slides = [];
        for (var i = 0; i < 600; i += 1) {
          slides.push('Slide ' + (i + 1));
        }
        return slides;
      }()),
      // virtual data
      virtualData: {
        slides: [],
      },
    }
  }
  componentDidMount() {
    const self = this;
    const swiper = new Swiper('.swiper-container', {
      // ...
      virtual: {
        slides: self.state.slides,
        renderExternal(data) {
          // assign virtual slides data
          self.setState({
            virtualData: data,
          });
        }
      },
    });
  }
  render() {
    {/* ... */}
    <div className="swiper-container">
      <div className="swiper-wrapper">
        {/* It is important to set "left" style prop on every slide */}
        {this.state.virtualData.slides.map((slide, index) => (
          <div className="swiper-slide"
            key={index}
            style={{left: `${virtualData.offset}px`}}
          >{slide}</div>
        ))}
      </div>
    </div>
    {/* ... */}
  }
}

Навигация по хачкам

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

Чтобы заставить его работать, вам нужно включить его, передав hashNavigation:trueпараметр и добавив хэши слайдов в data-hashатрибут:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-hash="slide1">Slide 1</div>
        <div class="swiper-slide" data-hash="slide2">Slide 2</div>
        <div class="swiper-slide" data-hash="slide3">Slide 3</div>
        <div class="swiper-slide" data-hash="slide4">Slide 4</div>
        <div class="swiper-slide" data-hash="slide5">Slide 5</div>
        ...
    </div>
</div>
var swiper = new Swiper('.swiper-container', {
  //enable hash navigation
  hashNavigation: true
})

Параметры навигации по hash

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

var mySwiper = new Swiper('.swiper-container', {
  hashNavigation: {
    replaceState: true,
  },
});
{
watchState логический false Установите значение true, чтобы включить также навигацию через слайды (когда hashnav включен) в истории браузера или путем установки непосредственно хэша на местоположение документа
replaceState логический false Работает в дополнение к хешнаву, чтобы заменить текущее состояние url новым, вместо того, чтобы добавлять его в историю
}

История навигации

Параметры навигации по истории

параметр Тип По умолчанию Описание
история объект / логический Включает статус истории, в котором каждый слайд будет иметь свой собственный URL-адрес. В этом параметре вы должны указать основной слайды url как «слайды» и указать каждый data-historyатрибут слайда с использованием атрибута.

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

var mySwiper = new Swiper('.swiper-container', {
  history: {
    replaceState: true,
  },
});
<!-- will produce "slides/slide1" url in browser history -->
<div class="swiper-slide" data-history="slide1"></div>
{
replaceState логический false Работает в дополнение к хешнаву или истории, чтобы заменить текущее состояние url новым, а не добавлять его в историю
ключ строка «горки» Клавиша Url для слайдов
}

контроллер

Параметры контроллера

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

var mySwiper = new Swiper('.swiper-container', {
  controller: {
    inverse: true,
  },
});
{
контроль [Свитер-экземпляр] не определено Передайте еще один экземпляр или массив Swiper с экземплярами Swiper, которые должны контролироваться этим Swiper
обратный логический false Установите значение true и управление будет в обратном направлении
от строка ‘горка’ Может быть 'slide'или 'container'. Определяет способ управления другим слайдером: скользить по слайду (по отношению к сетке другого слайдера) или в зависимости от всех слайдов / контейнера (в зависимости от общего значения ползунка)
}

Доступность (a11y)

Параметры доступности

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

var mySwiper = new Swiper('.swiper-container', {
  a11y: {
    prevSlideMessage: 'Previous slide',
    nextSlideMessage: 'Next slide',
  },
});
{
включен логический true Включает A11y
prevSlideMessage строка «Предыдущий слайд» Сообщение для чтения с экрана для предыдущей кнопки
nextSlideMessage строка «Следующий слайд» Сообщение для читателей экрана для следующей кнопки
firstSlideMessage строка «Это первый слайд» Сообщение для считывателей экрана для предыдущей кнопки, когда swiper находится на первом слайде
lastSlideMessage строка «Это последний слайд» Сообщение для чтения с экрана для предыдущей кнопки, когда swiper находится на последнем слайде
разбиение на страницы BulletMessage строка ‘Перейти к слайду {{index}}’ Сообщение для чтения с экрана для одиночной пагинальной пули
notificationClass строка ‘Swiper-уведомление’ Имя класса CSS для уведомления a11
{

Пользовательская сборка

У вас есть два варианта создания пользовательской версии Swiper.

1. Использование ES-модуля

Если вы используете связку с поддержкой ES-модулей в своем проекте, вы можете импортировать только нужные вам модули:

// Import Swiper and modules
import { Swiper, Navigation, Pagination, Scrollbar } from 'swiper/dist/js/swiper.esm.js';

// Install modules
Swiper.use([Navigation, Pagination, Scrollbar]);

// Now you can use Swiper
var swiper = new Swiper('.swiper-container', {
  speed: 500,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // ...
});

Следующие модули экспортируются из swiper.esm.js:

  • Swiper — основная библиотека
  • Virtual — Модуль виртуальных слайдов
  • Keyboard — Модуль управления клавиатурой
  • Mousewheel — Модуль управления Mousewheel
  • Navigation — Модуль навигации
  • Pagination — Модуль разбивки на страницы
  • Scrollbar — Модуль прокрутки
  • Parallax — Модуль Parallax
  • Zoom — Модуль масштабирования
  • Lazy — ленивый модуль
  • Controller — Модуль контроллера
  • A11y — Модуль доступности
  • History — История
  • HashNavigation — Модуль навигации Hash
  • Autoplay — Модуль автовоспроизведения
  • EffectFade — Модуль Fade Effect
  • EffectCube — Модуль эффектов куба
  • EffectFlip — Модуль Flip Effect
  • EffectCoverflow — Модуль эффектов Coverflow

2. Использование скрипта сборки

Swiper поставляется с gulp builder, который позволяет создавать пользовательскую версию библиотеки, где вы можете включать только необходимые модули. Нам нужно следующее:

  1. Загрузите и распакуйте репозиторий Swiper GitHub в локальную папку
  2. Установите Node.js (если не установлен)
  3. Установите Gulp (если не установлен), выполнив следующую команду в терминале:
    $ npm install --global gulp
  4. Теперь нам нужно установить необходимые зависимости. Перейдите в папку с загруженным и распакованным хранилищем Swiper и выполните в терминале:
    $ npm install
  5. Открыть scripts/build-config.jsфайл:
    module.exports = {
      // remove components you don't need
      components: [
        'virtual',
        'keyboard',
        'mousewheel',
        'navigation',
        'pagination',
        'scrollbar',
        'parallax',
        'zoom',
        'lazy',
        'controller',
        'a11y',
        'history',
        'hash-navigation',
        'autoplay',
        'effect-fade',
        'effect-cube',
        'effect-flip',
        'effect-coverflow',
      ],
      // target device, can be "desktop" or "universal"
      target: 'universal',
      // default color of navigation elements
      themeColor: '#007aff',
      // additional color to be included
      colors: {
        white: '#ffffff',
        black: '#000000',
      },
    };
  6. Теперь мы готовы создать пользовательскую версию Swiper:
    $ npm run build:prod
  7. Это все. Сгенерированные файлы CSS и JS и их мини-версии будут доступны в dist/папке.

Скрыть
Ура! Вы первые нашли эту информацию, сделайте доброе дело, поделитесь ей в: