Параметры Swiper

Описание

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

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

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

Описание

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

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

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

Описание

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

Описание

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

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

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

Описание

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

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

Описание

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

Описание

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

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

Описание

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

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

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

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

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

Описание

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

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

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

Описание

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

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

Описание

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

Описание

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

Описание

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

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

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

Описание

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

Описание

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

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

Описание

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

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

Описание

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

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

Описание

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

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

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

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

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

Описание

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

Описание

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

Описание

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

Описание

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


Описание

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

Описание

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

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

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

Описание

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

Описание

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

Описание

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

Описание

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

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


Описание

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

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

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

Описание

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

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

Описание

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

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

Описание

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

Описание

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

Описание

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

Описание

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


Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

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

Описание

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

Описание

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

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

Описание

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

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

Описание

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

Описание

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


Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

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

Описание

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

Описание

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

Описание

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

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

Описание

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

Описание

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

Описание

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

Описание

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

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

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

Описание

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

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

Описание

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

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

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

Описание

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

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

Описание

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

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

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

Описание

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

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

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

Описание

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

Описание

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

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

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

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

Описание

Количество слайдов, видимых в области просмотра (слайды одновременно отображаются в контейнере слайдера). От переводчика: также можно указывать десятичные дроби: читаем статью Показать фрагмент следующего слайда в Swiper.js.

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

Описание

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

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

Описание

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

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

Описание

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

Описание

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

Описание

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

Описание

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

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

Описание

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

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

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

Описание

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

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