Параметры 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 и у вас с ним конфликт, то вам следует отключить этот параметр.