Метка: grid

Записи с меткой "grid"

CSS Grid Layout

CSS Grid Layout представляет двумерную сетку для CSS. Grid (здесь и далее подразумевается CSS Grid Layout) можно использовать для размещения основных областей страницы или небольших элементов пользовательского интерфейса. В этой статье описывается компоновка сетки CSS и новая терминология, которая является частью спецификации CSS Grid Layout Level 1. Функции, показанные в этом обзоре, будут более подробно описаны в остальной части данного руководства.

.grid { 
   display: grid; 
   grid-template-columns: 200px 200px 200px; // задаём количество и ширину столбцов в px
   grid-template-columns: 1fr 1fr 1fr;  // задаём количество и ширину столбцов в fr
   grid-column-gap: 10px;  // задаём интервалы между столбцами
   grid-template-rows: 50px 1fr 30px;  // задаём количество и размеры строк
   grid-row-gap: 1em;  // задаём интервалы между строками
   grid-gap: 3%;  // задаём интервалы между строками и столбцами
}

Что такое Grid?

Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий - один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам. Grid имеет следующие функции:

Фиксированные и гибкие размеры полос

Вы можете создать сетку с фиксированными размерами полос — например, используя пиксели. Вы также можете создать сетку с гибкими размерами, используя проценты или новую единицу измерения - fr, предназначенную для этой цели.

Расположение элемента

Вы можете размещать элементы в заданном месте Grid, используя номера строк, имена или путём привязки к области Grid. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в Grid.

Создание дополнительных полос для хранения контента

Вы можете определить явную сетку с макетом сетки, но спецификация также касается контента, добавленного за пределами объявленной сетки, при необходимости добавляя дополнительные строки и столбцы. Включены такие функции, как добавление «столько столбцов, сколько будет помещено в контейнер».

Управление выравниванием

Grid содержит функции выравнивания, чтобы мы могли контролировать, как элементы выравниваются после размещения в области сетки, и как выравнивается весь Grid.

Управление перекрывающимся контентом

В ячейку сетки может быть помещено более одного элемента, или области могут частично перекрывать друг друга. Затем это расслоение можно контролировать с помощью z-index.

Grid - это мощная спецификация и в сочетании с другими частями CSS, такими как flexbox, может помочь вам создать макеты, которые ранее невозможно было построить в CSS. Все начинается с создания сетки в вашем grid контейнере.

Grid контейнер

Мы создаёмgrid контейнер, объявляяdisplay: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые детиэтого элемента станут элементами сетки.

В этом примере есть div, содержащий класс wrapper с пятью потомками

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
 <div>Three</div>
   <div>Four</div>
 <div>Five</div>
</div>

Сделаем wrapper grid контейнером

.wrapper {
  display: grid;
}

Все прямые потомки теперь являются grid элементами. В веб-браузере вы не увидите никакой разницы в отображении элементов, поскольку Grid создал единую сетку столбцов для элементов. На данный момент вам может оказаться удобным работать в Firefox Developer Edition, в котором есть Grid Inspector, доступный как часть инструментов разработчика. Если вы просмотрите этот пример в Firefox и проверите Grid, вы увидите маленький значок рядом с display: grid. Нажмите этот значок, и сетка на этом элементе будет наложена в окне браузера.

По мере вашего обучения и последующей работы с CSS Grid Layout этот инструмент даст вам лучшее визуальное представление о том, что происходит с вашей сеткой.

Если мы хотим, чтобы это стало более похожим на сетку, нам нужно добавить полосы.

Grid Tracks

Мы определяем ряды и столбцы в нашей сетке при помощи свойств grid-template-columnsи grid-template-rows. Это определяет полосы сетки. Полоса сетки — это место между любыми двумя линиями сетки. На изображении ниже вы можете увидеть подсветку полосы — первого трека ряда в нашей сетке.

Можно дополнить пример выше, добавив свойство grid-template-columns и задав размеры полос колонок.

В примере ниже мы создаём сетку с шириной колонки 200px. Каждый дочерний элемент сетки будет располагаться в отдельной ячейке сетки.

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div> 

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Единица измерения fr

Размер треков (полос) может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать эластичные (flexible) грид-треки. Новая единица длины fr представляет собой долю (fraction) доступного пространства в грид-контейнере. Определение грида в коде ниже создаст три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div> 

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

В следующем примере мы создаём грид с треком в 2fr и двумя треками по 1fr. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся.

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

В последнем примере смешаем треки с абсолютной длиной и треки с длиной во fr. Размер первого трека 500 пикселей, и эта фиксированная ширина убирается из доступного пространства. Оставшееся пространство разбивается на три части и пропорционально разделяется между двумя эластичными треками.

.wrapper {
  display: grid;
  grid-template-columns: 500px 1fr 2fr;
}

Задание треков с помощью нотации repeat()

В огромных гридах с большим количеством треков можно использовать нотацию repeat() , чтобы повторить структуру треков или её часть. Например, такое задание грида:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

можно записать вот так:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Repeat-нотацию можно использовать как часть списка треков. В следующем примере создаётся грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.

```
.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}

Repeat-нотация в качестве аргумента принимает список треков, поэтому с её помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной 1fr следует трек шириной 2fr, и все это дело повторяется пять раз.

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}

Явный и неявный грид

Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства grid-template-columns, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью grid-template-columnsи grid-template-rows. Если вы размещаете что-нибудь вне рамок определённого данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создаёт строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задаётся автоматически в зависимости от находящегося в них контента.

Вы также можете задать размер треков, создаваемых в виде неявного грида с помощью свойств grid-auto-rows(en-US)и grid-auto-columns(en-US).

В примере ниже мы задаём grid-auto-rows , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

 .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

Масштабирование треков и minmax()

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

Для подобных ситуаций в Grid предусмотрено решение с помощью функции minmax(). В следующем примере minmax() используется, как значение свойства grid-auto-rows(en-US). Автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум примут значение auto. Использование auto означает, что размер строки посмотрит на размер контента и растянется таким образом, чтобы вместить самый высокий элемент ячейки в этой строке.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
} 

<div class="wrapper">
   <div>One</div>
   <div>Two
   <p>I have some more content in.</p>
   <p>This makes me taller than 100 pixels.</p>
</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

Grid-линии

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

Линии нумеруются в соответствии с режимом написания (writing mode) документа. В языках с написанием слева-направо, линия 1 - самая левая линия в гриде. В языках с написанием справа-налево, линия 1 - самая правая линия в гриде. Линиям также можно давать имена, и - не переключайтесь, дальше мы узнаем, как это делать.

Размещение элементов по линиям

В дальнейшем мы детально рассмотрим размещение элементов с помощью линий, а пока остановимся на простом способе. При размещении элемента мы ссылаемся именно на линию, а не на трек.

В следующем примере мы размещаем первые два элемента в нашем гриде из трёх колоночных треков с помощью свойств grid-column-start(en-US), grid-column-end(en-US), grid-row-startи grid-row-end(en-US). Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.

Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека - со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида.

<div class="wrapper">
   <div class="box1">One</div>
   <div class="box2">Two</div>
   <div class="box3">Three</div>
   <div class="box4">Four</div>
   <div class="box5">Five</div>
</div>

 .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
}
.box1 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
.box2 {
    grid-column-start: 1;
    grid-row-start: 3;
    grid-row-end: 5;
}

Не забывайте, что вы можете использовать Grid Inspector в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.

Grid-ячейки

Грид-ячейка (grid cell) - наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определён для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.

Grid-области

Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создаёт грид-область (grid area). Грид-области должны быть перпендикулярными, - невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных.

grid-template-areas

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

Эти области не связаны с каким-либо конкретным элементом сетки, но на них можно ссылаться из свойств размещения сетки grid-row-start, grid-row-end, grid-column-start, grid-column-end grid-row и их сокращений grid-column, grid-area

/* Keyword value */
grid-template-areas: none; /* <string> values */
grid-template-areas: "a b";
grid-template-areas:
  "a b b"
  "a c d"; /* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: revert-layer;
grid-template-areas: unset;
```

Пример

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>
```

CSS

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav  main"
    "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}
#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}
#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}
#page > main {
  grid-area: main;
  background-color: #ffff64;
}
#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
```

Зазоры (Gutters)

Зазоры (Gutters) или аллеи (alleys) между грид-ячейками можно создать с помощью свойств grid-column-gap(en-US)и grid-row-gap(en-US), или с помощью сокращённого свойства grid-gap(en-US). В примере ниже мы создаём зазор в 10 пикселей между колонками и в 1em между строками.

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 1em;
} 

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

Любое пространство, которое занимают зазоры, добавляется в начало эластичных треков, задаваемых с помощью fr, поэтому зазоры используются для регулирования размеров и действуют как регулярные грид-треки, хотя что-то разместить в них нельзя. В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой грид-линии была добавлена толщина.

Вложенные гриды

Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трёхколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.

<div class="wrapper">
   <div class="box box1">
       <div class="nested">a</div>
       <div class="nested">b</div>
       <div class="nested">c</div>
    </div>
    <div class="box box2">Two</div>
    <div class="box box3">Three</div>
    <div class="box box4">Four</div>
    <div class="box box5">Five</div>
</div>

Если мы задаём для box1 значение display: grid , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.

.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

В данном случае вложенный грид не связан с родительским. Как вы можете видеть, он не наследует значение свойства grid-gap(en-US)родительского элемента и линии вложенного грида не выравниваются по линиям родительского грида.

Подгрид (Subgrid)

В спецификации гридов уровня 2 есть функциональность, называемая подгридом (subgrid) , которая позволит нам создавать вложенные гриды, использующие структуру треков родительского грида.

Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.

В приведённом выше примере мы можем отредактировать вложенный грид, изменив grid-template-columns: repeat(3, 1fr), на grid-template-columns: subgrid. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.

.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   display: grid;
   grid-template-columns: subgrid;
}

Размещение элементов с помощью z-index

Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещёнными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:

<div class="wrapper">
   <div class="box box1">One</div>
   <div class="box box2">Two</div>
   <div class="box box3">Three</div>
   <div class="box box4">Four</div>
   <div class="box box5">Five</div>
</div> Copy to Clipboard
```
.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
}
.box2 {
   grid-column-start: 1;
   grid-row-start: 2;
   grid-row-end: 4;
}

Элемент box2 теперь перекрывает box1, и отображается сверху, поскольку в исходном коде находится ниже.

Управление порядком отображения

Порядком, в котором элементы накладываются друг на друга, можно управлять с помощью свойства z-index- точно так же, как в случае с позиционированными элементами. Если задать box2 значение z-index , меньшее, чем у box1 , в стеке он отобразится под элементом box1.

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   z-index: 2;
}
.box2 {
   grid-column-start: 1;
   grid-row-start: 2;
   grid-row-end: 4;
   z-index: 1;
}

grid

Swiper API

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

<!-- Slider main container -->
<div class="swiper">
  <!-- 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 содержит различные наборы стилей CSS, Less и SCSS:

Стили CSS

Стили CSS для версии пакета:

swiper-bundle.css— все стили Swiper, включая стили всех модулей (например, навигации, постраничной навигации и т. д.)
swiper-bundle.min.css- такой же, как предыдущий, но уменьшенный

Стили CSS для версии пакета (импорт пакета):

swiper/css— все стили Swiper, включая стили всех модулей (например, навигации, постраничной навигации и т. д.)
swiper/css/bundle- такой же, как предыдущий, но уменьшенный

Стили CSS для базовой версии и модулей (импорт пакетов):

swiper/css- только основные стили Swiper
swiper/css/a11y- стили, необходимые для модуля A11y
swiper/css/autoplay- стили, необходимые для модуля автозапуска
swiper/css/controller- стили, необходимые для модуля контроллера
swiper/css/effect-cards- стили, необходимые для модуля Cards Effect
swiper/css/effect-coverflow- стили, необходимые для модуля Coverflow Effect
swiper/css/effect-creative- стили, необходимые для модуля Creative Effect
swiper/css/effect-cube- стили, необходимые для модуля Cube Effect
swiper/css/effect-fade- стили, необходимые для модуля эффекта затухания
swiper/css/effect-flip- стили, необходимые для модуля Flip Effect
swiper/css/free-mode- стили, необходимые для модуля свободного режима
swiper/css/grid- стили, необходимые для модуля Grid
swiper/css/hash-navigation- стили, необходимые для модуля навигации по хэшу
swiper/css/history- стили, необходимые для модуля Истории
swiper/css/keyboard- стили, необходимые для модуля клавиатуры
swiper/css/manipulation- стили, необходимые для модуля манипулирования
swiper/css/mousewheel- стили, необходимые для модуля Mousewheel
swiper/css/navigation- стили, необходимые для навигационного модуля
swiper/css/pagination- стили, необходимые для модуля разбивки на страницы
swiper/css/parallax- стили, необходимые для модуля Parallax
swiper/css/scrollbar- стили, необходимые для модуля полосы прокрутки
swiper/css/thumbs- стили, необходимые для модуля Thumbs
swiper/css/virtual- стили, необходимые для виртуального модуля
swiper/css/zoom- стили, необходимые для модуля масштабирования

Меньше стилей

Меньшие стили - это отдельные стили для базовой версии и модулей (импорт пакетов):

swiper/less- только основные стили Swiper
swiper/less/bundle— все стили Swiper, включая стили всех модулей (например, навигации, постраничной навигации и т. д.)
swiper/less/a11y- стили, необходимые для модуля A11y
swiper/less/autoplay- стили, необходимые для модуля автозапуска
swiper/less/controller- стили, необходимые для модуля контроллера
swiper/less/effect-cards- стили, необходимые для модуля Cards Effect
swiper/less/effect-coverflow- стили, необходимые для модуля Coverflow Effect
swiper/less/effect-creative- стили, необходимые для модуля Creative Effect
swiper/less/effect-cube- стили, необходимые для модуля Cube Effect
swiper/less/effect-fade- стили, необходимые для модуля эффекта затухания
swiper/less/effect-flip- стили, необходимые для модуля Flip Effect
swiper/less/free-mode- стили, необходимые для модуля свободного режима
swiper/less/grid- стили, необходимые для модуля Grid
swiper/less/hash-navigation- стили, необходимые для модуля навигации по хэшу
swiper/less/history- стили, необходимые для модуля Истории
swiper/less/keyboard- стили, необходимые для модуля клавиатуры
swiper/less/manipulation- стили, необходимые для модуля манипулирования
swiper/less/mousewheel- стили, необходимые для модуля Mousewheel
swiper/less/navigation- стили, необходимые для навигационного модуля
swiper/less/pagination- стили, необходимые для модуля разбивки на страницы
swiper/less/parallax- стили, необходимые для модуля Parallax
swiper/less/scrollbar- стили, необходимые для модуля полосы прокрутки
swiper/less/thumbs- стили, необходимые для модуля Thumbs
swiper/less/virtual- стили, необходимые для виртуального модуля
swiper/less/zoom- стили, необходимые для модуля масштабирования

Стили SCSS

Стили SCSS также являются отдельными стилями для основной версии и модулей (импортируемых пакетов):

swiper/scss- только основные стили Swiper
swiper/scss/bundle— все стили Swiper, включая стили всех модулей (например, навигации, постраничной навигации и т. д.)
swiper/scss/a11y- стили, необходимые для модуля A11y
swiper/scss/autoplay- стили, необходимые для модуля автозапуска
swiper/scss/controller- стили, необходимые для модуля контроллера
swiper/scss/effect-cards- стили, необходимые для модуля Cards Effect
swiper/scss/effect-coverflow- стили, необходимые для модуля Coverflow Effect
swiper/scss/effect-creative- стили, необходимые для модуля Creative Effect
swiper/scss/effect-cube- стили, необходимые для модуля Cube Effect
swiper/scss/effect-fade- стили, необходимые для модуля эффекта затухания
swiper/scss/effect-flip- стили, необходимые для модуля Flip Effect
swiper/scss/free-mode- стили, необходимые для модуля свободного режима
swiper/scss/grid- стили, необходимые для модуля Grid
swiper/scss/hash-navigation- стили, необходимые для модуля навигации по хэшу
swiper/scss/history- стили, необходимые для модуля Истории
swiper/scss/keyboard- стили, необходимые для модуля клавиатуры
swiper/scss/manipulation- стили, необходимые для модуля манипулирования
swiper/scss/mousewheel- стили, необходимые для модуля Mousewheel
swiper/scss/navigation- стили, необходимые для навигационного модуля
swiper/scss/pagination- стили, необходимые для модуля разбивки на страницы
swiper/scss/parallax- стили, необходимые для модуля Parallax
swiper/scss/scrollbar- стили, необходимые для модуля полосы прокрутки
swiper/scss/thumbs- стили, необходимые для модуля Thumbs
swiper/scss/virtual- стили, необходимые для виртуального модуля
swiper/scss/zoom- стили, необходимые для модуля масштабирования

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

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

новый Swiper (swiperContainer, параметры) - инициализирует swiper с помощью опций

swiperContainer — HTMLElement или строка (с CSS-селектором) HTML-элемента контейнера свипера. Обязательно.
параметры - объект - объект с параметрами Swiper. Необязательно.
Метод возвращает инициализированный экземпляр Swiper

Например:

const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,
});

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

const swiper = document.querySelector('.swiper').swiper;

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

Параметры

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

Имя	Тип	По умолчанию	Описание
a11y	Любой		Объект с параметрами a11y или логический`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { a11y: { prevSlideMessage: 'Previous slide', nextSlideMessage: 'Next slide', }, });`
allowSlideNext	логическое значение	верно	Установите значение`false`для отключения перехода к следующему направлению (вправо или вниз)
allowSlidePrev	логическое значение	верно	Установите значение`false`для отключения перехода к предыдущему направлению скольжения (влево или вверх)
Разрешить касание	логическое значение	верно	Если`false`, то единственный способ переключиться на другой слайд — использовать внешние функции API, такие как slidePrev или slideNext
Автоматический рост	логическое значение	ложь	Задайте значение`true`и обёртка слайдера будет подстраивать свою высоту под высоту активного слайда
автоматическое воспроизведение	Любой		Объект с параметрами автозапуска или логическим значением`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`, то клавиши точек останова рассматриваются как ширина контейнера свипера
Эффект карты	Любой		Объект с картами-параметры эффекта `const swiper = new Swiper('.swiper', { effect: 'cards', cardsEffect: { // ... }, });`
Центрирующие оползни	логическое значение	ложь	Если этот параметр включен, слайды центрируются, если количество слайдов меньше`slidesPerView`. Не предназначено для использования в режиме`loop`и`grid.rows`
центрироВанные оползни	логическое значение	ложь	Если`true`, то активное слайд-шоу будет отображаться по центру, а не всегда слева.
Центрированные скользящие границы	логическое значение	ложь	Если`true`, то активный слайд будет центрирован без добавления пробелов в начале и в конце слайдера. Требуется`centeredSlides: true`. Не предназначено для использования с`loop`или`pagination`
containerModifierClass	строка	"swiper-"	Начало CSS-класса модификатора, который можно добавить в контейнер Swiper в зависимости от различных параметров
контроллер	Любой		Объект с параметрами контроллера или логическим значением`true`для включения с настройками по умолчанию `const swiper = new Swiper('.swiper', { controller: { inverse: true, }, });`
Эффект coverflowEffect	Любой		Объект с параметрами эффекта Coverflow. `const swiper = new Swiper('.swiper', { effect: 'coverflow', coverflowEffect: { rotate: 30, slideShadows: false, }, });`
createElements	логическое значение	ложь	При включении Swiper автоматически обернет слайды элементом swiper-wrapper и создаст необходимые элементы для навигации, разбивки на страницы и полосы прокрутки, если они включены (с соответствующим объектом параметров или с логическим значением`true`))
Творческий эффект	Любой		Объект с параметрами креативного эффекта 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], }, }, });
cssMode	логическое значение	ложь	При включении он будет использовать современный CSS Scroll Snap API. Он поддерживает не все функции Swiper, но потенциально может значительно повысить производительность в простых конфигурациях. Это то, что не поддерживается, когда оно включено: Эффект куба `speed`параметр может не иметь никакого эффекта Все события, связанные с началом / завершением перехода (используйте`slideChange`вместо этого) `slidesPerGroup`имеет ограниченную поддержку `simulateTouch`не имеет эффекта, а «перетаскивание» с помощью мыши не работает `resistance`не имеет никакого эффекта `allowSlidePrev/Next` `swipeHandler` Если вы используете его с другими эффектами, особенно с 3D-эффектами, необходимо обернуть содержимое слайда элементом`<div className="swiper-slide-transform">`. И если вы используете какие-либо пользовательские стили для слайдов (например, цвета фона, радиус границы, границу и т. д.), их следует задавать для элемента`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>`
Эффект куба	Любой		Объект с параметрами кубического эффекта `const swiper = new Swiper('.swiper', { effect: 'cube', cubeEffect: { slideShadows: false, }, });`
направление	«по горизонтали»\|«по вертикали»	"горизонтальный"	Может быть`'horizontal'`или`'vertical'`(для вертикального слайдера).
Обнаружение кромки	строка\|логическое значение	ложь	Включите события Swiper для работы с возвратом свайпом в приложении. Если установлено значение`'prevent'`, то вместо этого будет предотвращаться системная навигация с возвратом свайпом. Эта функция работает только с событиями «касания» (а не с событиями указателя), поэтому она будет работать на устройствах iOS/Android и не будет работать на устройствах Windows с событиями указателя (касания).
edgeSwipeThreshold	номер	20	Область (в пикселях) от левого края экрана для отпускания сенсорных событий при свайпе назад в приложении
эффект	строка	"слайд"	Эффект перехода. Может быть`'slide'`,`'fade'`,`'cube''coverflow'`,`'flip''creative'`,,,,, или`'cards'`
включен	логическое значение	верно	Независимо от того, был ли Swiper изначально включен. Если Swiper отключен, он скроет все элементы навигации и не будет реагировать на какие-либо события и взаимодействия
eventsPrefix	строка	`swiper`	Префикс имени события для всех событий DOM, генерируемых элементом Swiper (веб-компонентом)
Эффект затухания	Любой		Объект с параметрами эффекта затухания `const swiper = new Swiper('.swiper', { effect: 'fade', fadeEffect: { crossFade: true }, });`
flipEffect	Любой		Объект с параметрами эффекта переворота `const swiper = new Swiper('.swiper', { effect: 'flip', flipEffect: { slideShadows: false, }, });`
Фокусируемые элементы	строка	«ввод, выбор, опция, текстовое поле, кнопка, видео, метка»	Селектор CSS для элементов, на которые можно навести курсор. Свайпинг будет отключен для таких элементов, если они «наведены»
followFinger	логическое значение	верно	Если функция отключена, то ползунок будет анимироваться только при отпускании, он не будет двигаться, пока вы удерживаете на нём палец
Бесплатный режим	Любой		Включает функции бесплатного режима. Объект с параметрами бесплатного режима или логическое значение`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { freeMode: true, }); const swiper = new Swiper('.swiper', { freeMode: { enabled: true, sticky: true, }, });`
grabCursor	логическое значение	ложь	Эта опция может немного улучшить удобство использования Swiper на компьютере. Если`true`, пользователь увидит курсор «захвата» при наведении на Swiper
сетка	Любой		Объект с параметрами сетки для включения ползунка «многострочный». `const swiper = new Swiper('.swiper', { grid: { rows: 2, }, });`
Хэшнавигация	Любой		Включает навигацию по хэш-ссылкам для слайдов. Объект с параметрами хэш-навигации или логическое значение`true`для включения с настройками по умолчанию `const swiper = new Swiper('.swiper', { hashNavigation: { replaceState: true, }, });`
высота	нулевой\|номер	null	Высота Swiper (в пикселях). Параметр позволяет задать высоту Swiper. Полезно только в том случае, если вы инициализируете Swiper, когда он скрыт, а также в средах SSR и Test для правильной инициализации Swiper Установка этого параметра приведет к тому, что Swiper перестанет реагировать
история	Любой		Включает функцию сохранения состояния истории, при которой у каждого слайда будет свой URL-адрес. В этом параметре необходимо указать URL-адрес основного слайда, например`"slides"`и указать URL-адрес каждого слайда с помощью атрибута`data-history`. Объект с параметрами навигации по истории или логическим значением`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 автоматически при создании экземпляра. Если эта функция отключена, то вам нужно инициализировать Swiper вручную, вызвав`swiper.init()`
initialSlide	номер	0	Порядковый номер начального слайда.
Инжектные стили	строка[]		Внедрите стили текста в теневой DOM. Только для использования с элементом Swiper
injectStylesUrls	строка[]		Внедрите стили`<link>`в теневой DOM. Только для использования с элементом Swiper
клавиатура	Любой		Позволяет перемещаться по слайдам с помощью клавиатуры. Объект с параметрами клавиатуры или логическое значение`true`для включения с настройками по умолчанию `const swiper = new Swiper('.swiper', { keyboard: { enabled: true, onlyInViewport: false, }, });`
lazyPreloadPrevNext	номер	0	Количество следующих и предыдущих слайдов для предварительной загрузки. Применимо только при использовании отложенной загрузки.
Класс lazyPreloaderClass	строка	"swiper-ленивый предварительный загрузчик"	Имя CSS-класса ленивого предварительного загрузчика
Длинные наконечники	логическое значение	верно	Установите значение`false`, если вы хотите отключить длинные прокрутки
longSwipesMs	номер	300	Минимальная продолжительность (в миллисекундах) для перехода к следующему/предыдущему слайду при длительном смахивании
Стратегия длинных свайпов	номер	0.5	Соотношение для перехода к следующему / предыдущему слайду при длительном пролистывании
цикл	логическое значение	ложь	Установите значение`true`, чтобы включить режим непрерывного цикла Из-за особенностей работы режима цикла (он меняет порядок слайдов) общее количество слайдов должно быть: больше или равно`slidesPerView`+`slidesPerGroup` даже для`slidesPerGroup`(или использовать`loopAddBlankSlides`параметр) даже для`grid.rows`(или использовать`loopAddBlankSlides`параметр)
loopAddBlankSlides	логическое значение	верно	Автоматически добавляет пустые слайды, если вы используете сетку или`slidesPerGroup`и общее количество слайдов не равно`slidesPerGroup`или`grid.rows`
loopAdditionalSlides	номер	0	Позволяет увеличить количество закольцованных слайдов
loopPreventsSliding	логическое значение	верно	Если эта функция включена, то кнопки «Далее» и «Назад» не будут работать, пока слайдер анимируется в режиме цикла
maxBackfaceHiddenSlides	номер	10	Если общее количество слайдов меньше указанного здесь значения, то Swiper включит`backface-visibility: hidden`на элементах слайдов, чтобы уменьшить визуальное «мерцание» в Safari. Не рекомендуется включать эту функцию на большом количестве слайдов, так как это снизит производительность
модули	любой[]		Массив с модулями Swiper `import Swiper from 'swiper'; import { Navigation, Pagination } from 'swiper/modules'; const swiper = new Swiper('.swiper', { modules: [ Navigation, Pagination ], });`
колесо мыши	Любой		Позволяет перемещаться по слайдам с помощью колёсика мыши. Объект с параметрами колёсика мыши или логическое значение`true`для включения с настройками по умолчанию `const swiper = new Swiper('.swiper', { mousewheel: { invert: true, }, });`
навигация	Любой		Объект с параметрами навигации или логическим значением`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, });`
вложенный	логическое значение	ложь	Установите`true`на Swiper для корректного перехвата событий касания. Используйте только на свиперах, которые используют то же направление, что и родительский элемент
Промывка носа	логическое значение	верно	Включать / отключать прокрутку элементов, соответствующих классу, указанному в`noSwipingClass`
noSwipingClass	строка	"swiper-без пролистывания"	Укажите`noSwiping`css-класс элемента
noSwipingSelector	строка		Может использоваться вместо`noSwipingClass`для указания элементов, для которых нужно отключить свайп. Например,`'input'`отключит свайп для всех входов
normalizeSlideIndex	логическое значение	верно	Нормализует индекс слайда.
Наблюдаем за родителями	логическое значение	ложь	Установите значение`true`если вам также нужно отслеживать изменения родительских элементов Swiper
Наблюдает за детьми	логическое значение	ложь	Установите значение`true`если вам также нужно отслеживать изменения для дочерних элементов слайдов Swiper
наблюдатель	логическое значение	ложь	Задайте значение`true`для включения наблюдателя за изменениями в Swiper и его элементах. В этом случае Swiper будет обновляться (перезапускаться) каждый раз, когда вы меняете его стиль (например, скрываете/отображаете) или изменяете дочерние элементы (например, добавляете/удаляете слайды)
вкл .	объект		Регистрация обработчиков событий
На любом	функция(обработчик)		Добавьте прослушиватель событий, который будет запускаться при всех событиях `const swiper = new Swiper('.swiper', { onAny(eventName, ...args) { console.log('Event: ', eventName); console.log('Event data: ', args); } });`
oneWayMovement	логическое значение	ложь	Если эта функция включена, слайды будут прокручиваться только вперёд (в одну сторону) независимо от направления прокрутки
разбивка на страницы	Любой		Объект с параметрами разбивки на страницы или логическим значением`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { pagination: { el: '.swiper-pagination', type: 'bullets', }, });`
параллакс	Любой		Объект с параметрами параллакса или boolean`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { parallax: true, });`
Пассивные прослушиватели	логическое значение	верно	По умолчанию для повышения производительности прокрутки на мобильных устройствах будут использоваться пассивные слушатели событий. Но если вам нужно использовать`e.preventDefault`и у вас возникает конфликт с ним, то вам следует отключить этот параметр
Предотвращение щелчков	логическое значение	верно	Установите значение`true`для предотвращения случайных нежелательных переходов по ссылкам во время прокрутки
Предотвращение распространения Clicksprop	логическое значение	верно	Установите значение`true`, чтобы остановить распространение событий кликов по ссылкам во время прокрутки
Предотвращение взаимодействия при переходе	логическое значение	ложь	Если эта функция включена, она не позволит менять слайды с помощью свайпа или кнопок навигации/пагинации во время перехода
сопротивление	логическое значение	верно	Установите значение`false`, если вы хотите отключить устойчивые границы
Сопротивление	номер	0.85	Эта опция позволяет вам контролировать коэффициент сопротивления
Сервер изменения размера	логическое значение	верно	Если эта функция включена, она будет использовать ResizeObserver (если поддерживается браузером) для контейнера Swiper, чтобы определять изменение размера контейнера (вместо отслеживания изменения размера окна)
перемотка назад	логическое значение	ложь	Установите значение`true`для включения режима «перемотки». При включенном режиме нажатие кнопки «следующий слайд» (или вызов`.slideNext()`) при нахождении на последнем слайде приведет к переходу на первый слайд. Нажатие кнопки «предыдущий слайд» (или вызов`.slidePrev()`) при нахождении на первом слайде приведет к переходу на последний слайд. Не следует использовать вместе с`loop`mode
Длина круга	логическое значение	ложь	Задайте`true`для округления значений ширины и высоты слайдов, чтобы текст не был размытым на экранах с обычным разрешением (если у вас такие есть)
runCallbacksOnInit	логическое значение	верно	При инициализации свипера запускаются события Transition/SlideChange/Start/End. Такие события будут запускаться при инициализации, если ваш initialSlide не равен 0 или вы используете режим цикла
полоса прокрутки	Любой		Объект с параметрами полосы прокрутки или логическим значением`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { scrollbar: { el: '.swiper-scrollbar', draggable: true, }, });`
setWrapperSize	логическое значение	ложь	Если вы включите эту опцию, плагин установит ширину/высоту оболочки Swiper, равную общему размеру всех слайдов. В основном эту опцию следует использовать в качестве запасного варианта совместимости для браузеров, которые плохо поддерживают макет flexbox
Короткие замахи	логическое значение	верно	Установите значение`false`, если вы хотите отключить короткие прокрутки
simulateTouch	логическое значение	верно	Если`true`Swiper будет принимать события мыши, такие как события касания (щелкните и перетащите для смены слайдов)
slideActiveClass	строка	"swiper-slide-активный"	Имя CSS-класса текущего активного слайда При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах Не поддерживается в компонентах Swiper React / Vue
slideBlankClass	строка	"swiper-slide-пустой"	Имя CSS-класса пустого слайда, добавляемого в режиме цикла (при включении`loopAddBlankSlides`). Не поддерживается в Swiper React / Vue
slideClass	строка	"swiper-слайд"	Имя CSS-класса слайда При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах Не поддерживается в компонентах Swiper React / Vue
slideFullyVisibleClass	строка	"swiper-слайд-полностью-виден"	Имя CSS-класса для полностью (когда весь слайд находится в области просмотра) видимого слайда Не поддерживается в Swiper React / Vue
slideNextClass	строка	"swiper-slide-next"	Имя CSS-класса слайда, которое находится сразу после текущего активного слайда При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах Не поддерживается в Swiper React / Vue
slidePrevClass	строка	'swiper-slide-предыдущий'	CSS-класс slide, который находится прямо перед текущим активным слайдом При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах Не поддерживается в Swiper React / Vue
slideToClickedSlide	логическое значение	ложь	Установите значение`true`и нажмите на любой слайд, чтобы перейти к этому слайду
slideVisibleClass	строка	"видимый слайд swiper"	Имя CSS-класса текущего / частично видимого слайда При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах Не поддерживается в Swiper React / Vue
slidesoffset после	номер	0	Добавьте (в пикселях) дополнительное смещение слайда в конце контейнера (после всех слайдов)
slidesOffsetBefore	номер	0	Добавьте (в пикселях) дополнительное смещение слайда в начале контейнера (перед всеми слайдами)
slidesPerGroup	номер	1	Задайте количество слайдов для определения и включения группового скольжения. Полезно использовать с slidesPerView > 1
slidesPerGroupAuto	логическое значение	ложь	Этот параметр предназначен для использования только с`slidesPerView: 'auto'`и`slidesPerGroup: 1`. Если он включен, то при вызове методов`.slideNext()`и`.slidePrev()`будут пропускаться все слайды в режиме просмотра, при нажатии «кнопок» навигации и при автозапуске.
slidesPerGroupSkip	номер	0	Параметр работает следующим образом: Если`slidesPerGroupSkip`равно`0`(по умолчанию), слайды не исключаются из группировки, и результат будет таким же, как и без этого изменения. Если`slidesPerGroupSkip`равно или больше`1`, то первые X слайдов рассматриваются как отдельные группы, а все последующие слайды группируются по значению`slidesPerGroup`
Просмотр слайдов	номер\|"авто"	1	Количество слайдов на один просмотр (количество слайдов, одновременно отображаемых в контейнере слайдера). `slidesPerView: 'auto'`в настоящее время не поддерживается многострочный режим, когда`grid.rows`> 1
Расстояние между	строка\|номер	0	Расстояние между слайдами в пикселях. Если вы используете свойство CSS «margin» для элементов, которые входят в Swiper и в которые вы передаёте параметр «spaceBetween», навигация может работать некорректно.
Скорость	номер	300	Продолжительность перехода между слайдами (в мс)
Манипулятор прокрутки	Любой	null	Строка с CSS-селектором или HTML-элементом контейнера с разбивкой на страницы, которая будет работать как единственный доступный обработчик для прокрутки
swiperElementNodeName	строка	"SWIPER-КОНТЕЙНЕР"	Имя узла элемента swiper; используется для определения рендеринга веб-компонента
пороговое значение	номер	5	Пороговое значение в пикселях. Если «расстояние касания» будет меньше этого значения, то свиппер не будет перемещаться
большие пальцы	Любой		Объект с параметрами компонента thumbs `const swiper = new Swiper('.swiper', { ... thumbs: { swiper: thumbsSwiper } });`
Touchangle'а	номер	45	Допустимый угол (в градусах) для запуска сенсорного перемещения
touchEventsTarget	'контейнер'\|'обёртка'	"оболочка"	Целевой элемент для прослушивания событий касания. Может быть`'container'`(для прослушивания событий касания на слайдере) или`'wrapper'`(для прослушивания событий касания на оболочке слайдера)
touchMoveStopPropagation	логическое значение	ложь	Если эта функция включена, то распространение события «касание» будет остановлено
Сенсорное управЛение	номер	1	Коэффициент соприкосновения
touchReleaseOnEdges	логическое значение	ложь	Включите отработку событий касания в крайних положениях ползунка (начало, конец), чтобы обеспечить дальнейшую прокрутку страницы. Эта функция работает только с событиями касания (а не с событиями указателя), поэтому она будет работать на устройствах iOS/Android и не будет работать на устройствах Windows с событиями указателя. Также`threshold`параметр должен быть установлен на`0`
touchStartForcePreventDefault	логическое значение	ложь	Принудительно всегда предотвращать событие по умолчанию для`touchstart`(`pointerdown`)
touchStartPreventDefault	логическое значение	верно	Если он отключен,`pointerdown`событие не будет предотвращено
Уникальные возможности	логическое значение	верно	Если включено (по умолчанию) и параметры элементов навигации передаются в виде строки (например,`".pagination"`), то Swiper сначала будет искать такие элементы среди дочерних элементов. Применяется для нумерации страниц, кнопок «предыдущая»/«следующая» и элементов полосы прокрутки
Обновите размер окна	логическое значение	верно	Swiper будет пересчитывать положение слайдов при изменении размера окна (ориентации)
url	нулевая\|строка	null	Требуется для активного обнаружения слайдов при рендеринге на стороне сервера и включенной истории
Пользовательский агент	нулевая\|строка	null	строка userAgent. Требуется для определения браузера/устройства при рендеринге на стороне сервера
виртуальный	Любой		Включает функцию виртуальных слайдов. Объект с параметрами виртуальных слайдов или логическое значение`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { virtual: { slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'], }, });`
Виртуальный перевод	логическое значение	ложь	Если вы включите эту опцию, слайдер будет работать как обычно, за исключением того, что он не будет перемещаться, а значения реального перемещения на обёртке не будут заданы. Полезно, если вам нужно создать собственный переход слайдов
watchOverflow	логическое значение	верно	При включении Swiper будет отключён и скроет кнопки навигации, если для скольжения недостаточно слайдов.
watchSlidesProgress	логическое значение	ложь	Включите эту функцию, чтобы рассчитать прогресс и видимость каждого слайда (слайды в области просмотра будут иметь дополнительный класс видимости)
ширина	нулевой\|номер	null	Ширина Swiper (в пикселях). Параметр позволяет задать ширину Swiper. Полезно только в том случае, если вы инициализируете Swiper, когда он скрыт, а также в средах SSR и Test для правильной инициализации Swiper Установка этого параметра приведет к тому, что Swiper перестанет реагировать
КЛАСС -оболочка	строка	"swiper-оболочка"	Имя CSS-класса оболочки слайдов При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах Не поддерживается в Swiper React / Vue
масштабирование	Любой		Включает функцию масштабирования. Объект с параметрами масштабирования или логическое значение`true`для включения с настройками по умолчанию `const swiper = new Swiper('.swiper', { zoom: { maxRatio: 5, }, });`

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

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

Свойства
swiper.a11y	Любой
swiper.activeIndex	номер	Индексный номер текущего активного слайда Обратите внимание, что в режиме цикла значение активного индекса всегда будет смещаться на количество циклов
swiper.allowSlideNext	логическое значение	Отключите / включите возможность перехода к следующим слайдам, присвоив`false`/`true`этому свойству
swiper.allowSlidePrev	логическое значение	Отключите / включите возможность перехода к предыдущим слайдам, присвоив`false`/`true`этому свойству
swiper.allowTouchMove	логическое значение	Отключите / включите возможность перемещать ползунок, захватив его мышью или коснувшись пальцем (на сенсорных экранах), назначив`false`/`true`для этого свойства
swiper.анимация	логическое значение	`true`если swiper находится на переходном этапе
swiper.автозапуск	Любой
swiper.cardэффект	Любой
swiper.clickedIndex	номер	Индексный номер последнего нажатого слайда
swiper.clickedSlide	HTMLЭлемент	Ссылка на слайд, на который щелкнули последним (HTMLElement)
swiper.контроллер	Любой
swiper.coverflowEffect	Любой
swiper.creativeffect	Любой
swiper.cubeEffect	Любой
swiper.defaults	Любой	Параметры Swiper по умолчанию
swiper.el	HTMLЭлемент	HTML-элемент контейнера слайдера
swiper.extendedDefaults	Любой	Объект с глобальными расширенными опциями Swiper
swiper.fadeEffect	Любой
swiper.flipEffect	Любой
swiper.свободный режим	Любой
swiper.хэшнавигация	Любой
swiper.height	номер	Высота контейнера
swiper.история	Любой
swiper.isBeginning	логическое значение	`true`если ползунок находится в крайнем левом/верхнем положении
swiper.isEnd	логическое значение	`true`если ползунок находится в крайнем «правом»/«нижнем» положении
swiper.isLocked	логическое значение	`true`если слайд «заблокирован» (с помощью`watchOverflow`) и слайды не могут быть, например, когда количество слайдов меньше, чем количество просмотров
swiper.клавиатура	Любой
swiper.колесо мыши	Любой
swiper.навигация	Любой
swiper.originalParams	Любой	Объект с исходными параметрами инициализации
swiper.разбивка на страницы	Любой
swiper.параллакс	Любой
swiper.параметры	Любой	Объект с переданными параметрами инициализации
swiper.Предыдущий индекс	номер	Индексный номер ранее активного слайда
swiper.прогресс	номер	Текущий прогресс перевода оболочки (с 0 на 1)
swiper.realIndex	номер	Индексируйте количество активных в данный момент слайдов с учетом переставленных слайдов в режиме цикла
swiper.полоса прокрутки	Любой
swiper.слайды	HTMLЭлемент[]	Массив HTML-элементов slides. Чтобы получить конкретный HTMLЭлемент slide, используйте`swiper.slides[1]`
swiper.snapGrid	номер []	Скользит по сетке привязки
swiper.snapIndex	номер	Индексный номер текущей оснастки`snapGrid`
swiper.swipeDirection	'предыдущая'\|'следующая'	Направление скольжения
swiper.thumbs	Любой
swiper.касания	объект	Объект со следующими свойствами события касания: `swiper.touches.startX` `swiper.touches.startY` `swiper.touches.currentX` `swiper.touches.currentY` `swiper.touches.diff`
swiper.translate	номер	Текущее значение wrapper translate
swiper.virtual	Любой
swiper.width	номер	Ширина контейнера
swiper.wrapperEl	HTMLЭлемент	HTML-элемент-оболочка
swiper.zoom	Любой
Методы
swiper.attachEvents()		Снова подключите все прослушиватели событий
swiper.changeDirection(направление,требуется обновление)		Изменяет направление ползунка с горизонтального на вертикальное и обратно. направление—'горизонтальное'\|'вертикальное'— новое направление. Если не указано, то автоматически изменится на противоположное направление needUpdate—логическое значение— вызовет функцию swiper.update(). По умолчанию true
swiper.changeLanguageDirection(направление)		Изменяет язык слайдера направление—'rtl'\|'ltr'— новое направление. Должно быть `rtl` или `ltr`
swiper.destroy(удаление,чистые стили)		Уничтожьте экземпляр слайдера и отсоедините все прослушиватели событий deleteInstance—логическое значение— установите значение false (по умолчанию оно равно true), чтобы не удалять экземпляр Swiper cleanStyles—логическое значение— установите значение true (по умолчанию оно равно true), и все пользовательские стили будут удалены из слайдов, обертки и контейнера. Полезно, если вам нужно уничтожить Swiper и инициализировать его заново с новыми параметрами или в другом направлении
swiper.detachEvents()		Отсоединить все прослушиватели событий
swiper.отключить()		Отключите Swiper (если он был включён). Когда Swiper будет отключен, он скроет все элементы навигации и не будет реагировать на какие-либо события и взаимодействия
swiper.emit(событие,аргументы)		Событие срабатывания в экземпляре
swiper.enable()		Включить Swiper (если он был отключен)
swiper.extendDefaults(опции)		Расширение глобальных настроек Swiper по умолчанию
swiper.getTranslate()		Получить текущее значение swiper wrapper css3 transform translate
swiper.init(el)		Инициализировать слайдер
swiper.maxTranslate()		Получить текущее максимальное значение перевода
swiper.minTranslate()		Получить текущее минимальное значение перевода
swiper.off(событие,обработчик)		Удалить обработчик событий
swiper.offAny(обработчик)		Удалить прослушиватель событий, который будет запускаться при всех событиях
swiper.on(событие,обработчик)		Добавить обработчик событий
swiper.onAny(обработчик)		Добавьте прослушиватель событий, который будет запускаться при всех событиях
swiper.once(событие,обработчик)		Добавьте обработчик событий, который будет удален после его запуска
swiper.setGrabCursor()		Установить курсор захвата
swiper.setProgress(прогресс,скорость)		Задайте значение прогресса перемещения Swiper (от 0 до 1). Где 0 — начальная позиция (смещение) на первом слайде, а 1 — максимальная позиция (смещение) на последнем слайде прогресс—число— прогресс перевода Swiper (от 0 до 1). скорость-число- Длительность перехода (в мс).
swiper.setTranslate(переводить)		Установите значение translate пользовательского преобразования css3 для swiper wrapper
swiper.slideNext(скорость,обратные вызовы)		Запустите переход к следующему слайду. скорость-число- Длительность перехода (в мс). runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slidePrev(скорость,обратные вызовы)		Запустите переход к предыдущему слайду. скорость-число- Длительность перехода (в мс). runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slideReset(скорость,обратные вызовы)		Сбросьте положение слайдера до текущего активного слайда на время, равное параметру «скорость». скорость-число- Длительность перехода (в мс). runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slideTo(индекс,скорость,обратные вызовы)		Выполните переход к слайду с номером, равным параметру «index», в течение времени, равного параметру «speed». index-число- порядковый номер слайда. скорость-число- Длительность перехода (в мс). runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slideToClosest(скорость,обратные вызовы)		Сбросьте положение ползунка до ближайшей точки перехода/фиксации на время, равное параметру «скорость». скорость-число- Длительность перехода (в мс). runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slideToLoop(индекс,скорость,выполнить обратные вызовы)		Делает то же самое, что и .slideTo, но для случая, когда используется с включённым циклом. Таким образом, этот метод будет переходить к слайдам с realIndex, соответствующим переданному индексу index-число- порядковый номер слайда. скорость-число- Длительность перехода (в мс). runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slidesPerViewDynamic()		Получите динамически рассчитываемое количество слайдов на просмотр, полезно только в том случае, если для slidesPerView установлено значение`auto`
swiper.translateTo(translate,скорость,запускать обратные вызовы,переводить границы)		Анимируйте пользовательское значение преобразования CSS3 для обёртки Swiper translate-число- Перевод значения (в пикселях) скорость-количество- Длительность перехода (в мс) runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода translateBounds—логическое значение— установите значение false (по умолчанию оно равно true), и значение перехода может выходить за пределы минимального и максимального значений translate
swiper.unsetGrabCursor()		Сбросить курсор захвата
swiper.update()		Вы должны вызывать его после добавления/удаления слайдов вручную, после их скрытия/показа или выполнения любых пользовательских изменений DOM с помощью Swiper. Этот метод также включает в себя вызов следующих методов, которые можно использовать отдельно:
swiper.updateAutoHeight(скорость)		Заставьте свипер обновлять высоту (при включенном параметре autoHeight) в течение времени, равного параметру «скорость» скорость-число- Длительность перехода (в мс).
swiper.UpdateProgress()		пересчитать прогресс swiper
swiper.updateSize()		пересчитайте размер контейнера swiper
swiper.updateSlides()		пересчитать количество слайдов и их смещения. Полезно после добавления/удаления слайдов с помощью JavaScript
swiper.updateSlidesClasses()		обновите активные / предыдущие / следующие классы на слайдах и маркерах
swiper.use(модули)		Устанавливает модули на Swiper во время выполнения.

Мероприятия

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

Использованиеonпараметра при инициализации swiper:

const swiper = new Swiper('.swiper', {
  // ...
  on: {
    init: function () {
      console.log('swiper initialized');
    },
  },
});

Использованиеonметода после инициализации swiper.

const swiper = new Swiper('.swiper', {
  // ...
});
swiper.on('slideChange', function () {
  console.log('slide changed');
});

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

Имя	Аргументы	Описание
activeIndexChange	(swiper)	Событие будет срабатывать при активном изменении индекса
afterInit	(swiper)	Событие будет запущено сразу после инициализации
beforeDestroy	(swiper)	Событие будет запущено непосредственно перед уничтожением Swiper
Перед запуском	(swiper)	Событие будет запущено непосредственно перед инициализацией
beforeLoopFix	(swiper)	Событие будет запущено непосредственно перед "исправлением цикла"
Перед обработкой	(swiper)	Событие будет запущено перед обработчиком изменения размера
beforeSlideChangeStart	(swiper)	Событие будет запущено до начала перехода к смене слайда
Перед началом перехода	(swiper, скорость, внутренний)	Событие будет запущено до начала перехода
точка останова	(swiper, параметры точки останова)	Событие будет запущено при изменении точки останова
Измененное направление	(swiper)	Событие будет запущено при изменении направления
нажмите	(swiper, событие)	Событие будет запущено, когда пользователь нажмёт/коснётся Swiper. Получает`pointerup`событие в качестве аргумента.
уничтожить	(swiper)	Событие будет запущено при уничтожении swiper
Двойной щелчок	(swiper, событие)	Событие будет запущено, когда пользователь дважды щелкнет по Swiper
Двойной щелчок	(swiper, событие)	Событие будет запущено, когда пользователь дважды коснётся контейнера Swiper. Получает`pointerup`событие в качестве аргумента
fromEdge	(swiper)	Событие будет запущено, когда Swiper перейдет из начальной или конечной позиции
инициализация	(swiper)	Сработал сразу после инициализации Swiper. Обратите внимание, что синтаксис`swiper.on('init')`будет работать только в том случае, если вы зададите параметр`init: false` `const swiper = new Swiper('.swiper', { init: false, // other parameters }); swiper.on('init', function() { // do something }); // init Swiper swiper.init();` `// Otherwise use it as the parameter: const swiper = new Swiper('.swiper', { // other parameters on: { init: function () { // do something }, } });`
блокировка	(swiper)	Событие будет запущено, когда swiper заблокирован (когда`watchOverflow`включено)
Исправление цикла	(swiper)	Событие будет запущено после "исправления цикла"
Мгновенный скачок	(swiper)	Событие будет запущено при отскоке импульса
Обновление наблюдения	(swiper)	Событие будет запущено, если observer включен и он обнаруживает мутации DOM
изменение ориентации	(swiper)	Событие будет запущено при изменении ориентации (например, альбомная -> портретная)
прогресс	(swiper, прогресс)	Событие будет запущено при изменении прогресса Swiper. В качестве аргументов оно получает прогресс, который всегда находится в диапазоне от 0 до 1
Начало работы	(swiper)	Событие будет запущено, когда Swiper достигнет своего начала (начальной позиции)
reachEnd	(swiper)	Событие будет запущено, когда Swiper достигнет последнего слайда
Реальный обмен данными	(swiper)	Событие будет запущено при реальном изменении индекса
изменение размера	(swiper)	Событие будет запущено при изменении размера окна непосредственно перед обработкой Swiper onresize
setTransition	(swiper, переход)	Событие будет срабатывать каждый раз, когда свиппер запускает анимацию. Получает в качестве аргумента текущую продолжительность перехода (в миллисекундах)
setTranslate	(swiper, перевести)	Событие будет запущено, когда обёртка Swiper изменит своё положение. Получает текущее значение перевода в качестве аргумента
Изменение слайдов	(swiper)	Событие будет запущено при изменении текущего активного слайда
slideChangeTransitionEnd	(swiper)	Событие будет запущено после анимации другого слайда (следующего или предыдущего).
slideChangeTransitionStart	(swiper)	Событие будет запущено в начале перехода на другой слайд (следующий или предыдущий).
slideNextTransitionEnd	(swiper)	То же, что и «slideChangeTransitionEnd», но только для направления «вперёд»
slideNextTransitionStart	(swiper)	То же, что и «slideChangeTransitionStart», но только для направления «вперёд»
slidePrevTransitionEnd	(swiper)	То же, что и «slideChangeTransitionEnd», но только для «обратного» направления
slidePrevTransitionStart	(swiper)	То же, что и «slideChangeTransitionStart», но только в направлении «назад»
slideResetTransitionEnd	(swiper)	Событие будет запущено в конце анимации при переходе на следующий слайд
slideResetTransitionStart	(swiper)	Событие будет запущено в начале анимации перехода на текущий слайд
sliderFirstMove	(swiper, событие)	Событие будет запущено при первом касании / перетаскивании
sliderMove	(swiper, событие)	Событие будет запущено, когда пользователь коснётся Swiper и проведёт по нему пальцем. Получает`pointermove`событие в качестве аргумента.
slidesGridLengthChange	(swiper)	Событие будет запущено при изменении сетки слайдов
Изменение длины слайда	(swiper)	Событие будет запущено при изменении количества слайдов
Обновлено слайд-шоу	(swiper)	Событие будет запущено после того, как слайды и их размеры будут рассчитаны и обновлены
snapGridLengthChange	(swiper)	Событие будет запущено при изменении привязки сетки
snapIndexChange	(swiper)	Событие будет запущено при изменении индекса привязки
нажмите	(swiper, событие)	Событие будет запущено, когда пользователь нажмёт/коснётся Swiper. Получает`pointerup`событие в качестве аргумента.
toEdge	(swiper)	Событие будет запущено, когда Swiper перейдет в начальную или конечную позицию
touchEnd	(swiper, событие)	Событие будет запущено, когда пользователь отпустит Swiper. Получает`pointerup`событие в качестве аргумента.
touchMove	(swiper, событие)	Событие будет запущено, когда пользователь коснётся Swiper и проведёт по нему пальцем. Получает`pointermove`событие в качестве аргумента.
touchMoveOpposite	(swiper, событие)	Событие будет запущено, когда пользователь коснётся Swiper и проведёт пальцем в направлении, противоположном параметру направления. Получает`pointermove`событие в качестве аргумента.
Сенсорный запуск	(swiper, событие)	Событие будет запущено, когда пользователь коснётся Swiper. Получает`pointerdown`событие в качестве аргументов.
Завершение перехода	(swiper)	Событие будет запущено после перехода.
Начало перехода	(swiper)	Событие будет запущено в начале перехода.
разблокировать	(swiper)	Событие будет запущено, когда swiper будет разблокирован (когда`watchOverflow`включено)
Обновить	(swiper)	Событие будет запущено после вызова swiper.update()

Модули

Имя	Тип	По умолчанию	Описание
Отключенный класс	строка	"swiper-кнопка-отключена"	Имя класса CSS добавляется к кнопке навигации, когда она становится отключенной
включен	логическое значение		Логическое свойство для использования с точками останова, чтобы включить/отключить навигацию по определённым точкам останова
Скрытый класс	строка	"swiper-кнопка-скрыта"	Имя класса CSS добавляется к кнопке навигации, когда она становится скрытой
Скрытый клик	логическое значение	ложь	Переключать видимость кнопок навигации после нажатия на контейнер слайдера
Класс блокировки	строка	"swiper-блокировка кнопок"	Имя класса CSS добавляется к кнопке навигации, когда она отключена
navigationDisabledClass	строка	"swiper-навигация-отключена"	Имя CSS-класса добавлено в контейнер swiper, когда навигация отключена точкой останова
nextEl	Любой	null	Строка с CSS-селектором или HTML-элементом элемента, который будет работать как кнопка «Далее» после нажатия на неё
превЕл	Любой	null	Строка с CSS-селектором или HTML-элементом элемента, который будет работать как кнопка «предыдущая» после нажатия на неё

Свойства
swiper.nextEl	HTMLЭлемент	HTMLЭлемент навигационной кнопки "далее"
swiper.превЕл	HTMLЭлемент	HTMLЭлемент кнопки навигации "предыдущий"
Методы
swiper.уничтожить()		Уничтожить навигацию
swiper.init()		Инициализация навигации
swiper.update()		Обновить состояние кнопок навигации (включено / отключено)

Имя	Аргументы	Описание
Скрытая навигация	(swiper)	Событие будет запущено при скрытии навигации
navigationNext	(swiper)	Событие будет запущено при следующем нажатии кнопки навигации
Руководство по навигации	(swiper)	Событие будет запущено при нажатии предыдущей кнопки навигации
Навигационное шоу	(swiper)	Событие будет запущено при показе навигации

 {
  --swiper-navigation-size: 44px;
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
}

Разбивка на страницы

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

Имя	Тип	По умолчанию	Описание
bulletActiveClass	строка	"swiper-разбивка на страницы-маркер-активен"	Имя CSS-класса для маркера разбиения на страницы, активного в данный момент
Маркированный класс	строка	"swiper-разбивка на страницы-маркер"	Имя CSS-класса для отдельного маркера разбивки на страницы
bulletElement	строка	"диапазон"	Определяет, какой HTML-тег будет использоваться для отображения одиночной кнопки постраничной навигации. Только для`'bullets'`типа постраничной навигации.
кликабельный	логическое значение	ложь	Если`true`то нажатие на кнопку разбивки на страницы приведёт к переходу на соответствующий слайд. Только для типа разбивки на страницы с помощью маркеров
clickableClass	строка	"swiper-разбивка на страницы-кликабельный"	Имя CSS-класса устанавливается в разбивку на страницы, когда оно доступно для кликабельности
Текущий класс	строка	"swiper-разбивка на страницы-текущая"	Имя CSS-класса элемента с текущим активным индексом в «фрагментарной» разбивке на страницы
Динамические пакеты	логическое значение	ложь	Рекомендуется включить эту функцию, если вы используете нумерацию слайдов с помощью маркеров. Таким образом, одновременно будет отображаться только несколько маркеров.
dynamicMainBullets	номер	1	Количество основных маркеров, видимых при`dynamicBullets`включении.
el	Любой	null	Строка с CSS-селектором или HTML-элементом контейнера с разбиением на страницы
включен	логическое значение		Логическое свойство для использования с точками останова, чтобы включить/отключить разбиение на страницы в определённых точках останова
formatFractionCurrent	функция (номер)		отформатируйте дробную часть текущего номера. Функция получает текущий номер, и вам нужно вернуть отформатированное значение
formatFractionTotal	функция (номер)		отформатируйте общее количество разбиений на страницы. Функция получает общее количество, и вам нужно вернуть отформатированное значение
Скрытый класс	строка	"swiper-разбиение на страницы-скрыто"	Имя класса CSS для разбивки на страницы, когда он становится неактивным
Скрытый клик	логическое значение	верно	Переключение (скрытие/показ) видимости контейнера разбивки на страницы после нажатия на контейнер слайдера
Горизонтальный класс	строка	"swiper-разбивка на страницы-горизонтальная"	Имя CSS-класса, заданное для разбиения на страницы в горизонтальном Swiper
Класс блокировки	строка	'swiper-блокировка разбивки на страницы'	Имя класса CSS устанавливается в разбивку на страницы, когда оно отключено
Модифицирующий класс	строка	'swiper-разбивка на страницы-'	Начало имени CSS-класса модификатора, который будет добавлен к разбивке на страницы в зависимости от параметров
paginationDisabledClass	строка	"swiper-разбивка на страницы-отключена"	Имя CSS-класса, добавляемое к контейнеру Swiper и элементу разбивки на страницы, когда разбивка на страницы отключена из-за точки останова
progressbarFillClass	строка	"swiper-разбивка на страницы-панель выполнения-заполнение"	Имя CSS-класса элемента заполнения панели прогресса разбивки на страницы
progressbaroposite	логическое значение	ложь	Делает индикатор выполнения противоположным параметру Swiper`direction`: вертикальный индикатор выполнения для горизонтального направления Swiper и горизонтальный индикатор выполнения для вертикального направления Swiper
progressbarOppositeClass	строка	«swiper-pagination-progressbar-opposite»	Имя CSS-класса панели прогресса разбивки на страницы напротив
renderBullet	функция (индекс,имя_класса)		Этот параметр позволяет полностью настроить маркеры нумерации страниц. Вам нужно передать сюда функцию, которая принимает`index`количество маркеров нумерации страниц и имя класса необходимого элемента (`className`). Только для`'bullets'`типа нумерации `const swiper = new Swiper('.swiper', { //... renderBullet: function (index, className) { return '<span class="' + className + '">' + (index + 1) + '</span>'; } });`
Настройка визуализации	функция (swiper,текущий,общий)		Этот параметр необходим для типа разбиения на страницы`'custom'`, где нужно указать способ отображения. `const swiper = new Swiper('.swiper', { //... renderCustom: function (swiper, current, total) { return current + ' of ' + total; } });`
Преобразование рендеринга	функция (currentClass,totalClass)		Этот параметр позволяет настроить «дробную» нумерацию страниц в HTML. Только для`'fraction'`типа нумерации `const swiper = new Swiper('.swiper', { //... renderFraction: function (currentClass, totalClass) { return '<span class="' + currentClass + '"></span>' + ' of ' + '<span class="' + totalClass + '"></span>'; } });`
renderProgressbar	функция(progressbarFillClass)		Этот параметр позволяет настроить «прогрессивную» разбивку на страницы. Только для`'progress'`типа разбивки на страницы `const swiper = new Swiper('.swiper', { //... renderProgressbar: function (progressbarFillClass) { return '<span class="' + progressbarFillClass + '"></span>'; } });`
Общий класс	строка	"swiper-разбивка на страницы-всего"	Имя CSS-класса элемента с общим количеством «отрывков» в «дробной» нумерации
Тип	'индикатор выполнения'\|'маркеры'\|'дробь'\|'пользовательский'	"пули"	Строка с типом нумерации страниц. Может быть`'bullets'`,`'fraction'`,`'progressbar'`или`'custom'`
Вертикальный класс	строка	"swiper-разбивка на страницы-по вертикали"	Имя CSS-класса, заданное для разбиения на страницы в вертикальном Swiper

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

Свойства
swiper.пули	HTMLЭлемент[]	Массив HTML-элементов маркеров разбивки на страницы. Чтобы получить конкретный HTML-элемент слайда, используйте`swiper.pagination.bullets[1]`.
swiper.el	HTMLЭлемент	HTMLЭлемент элемента контейнера для разбивки на страницы
Методы
swiper.уничтожить()		Уничтожить разбивку на страницы
swiper.init()		Инициализировать разбивку на страницы
swiper.render()		Визуализировать макет разбивки на страницы
swiper.update()		Обновить состояние разбивки на страницы (включено / отключено / активно)

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

Имя	Аргументы	Описание
Отображение страниц	(swiper)	Событие будет запущено при разбиении на страницы скрыть
paginationRender	(swiper, paginationEl)	Событие будет запущено после отображения разбивки на страницы
Отображение страниц	(swiper)	Событие будет запущено при разбиении на страницы show
Обновление страницы	(swiper, paginationEl)	Событие будет запущено при обновлении разбивки на страницы

Пользовательские свойства CSS Разбиения на страницы

 {
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
}

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

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

Имя	Тип	По умолчанию	Описание
Класс перетаскивания	строка	"swiper-полоса прокрутки-перетаскивание"	CSS-класс перетаскиваемого элемента полосы прокрутки
Размер перетаскивания	номер\|"авто"	"авто"	Размер перетаскиваемого элемента полосы прокрутки в пикселях
перетаскиваемый	логическое значение	ложь	Установите значение`true`для включения перетаскивания полосы прокрутки, что позволит вам управлять положением ползунка
el	Любой	null	Строка с CSS-селектором или HTML-элементом контейнера с полосой прокрутки.
включен	логическое значение		Логическое свойство для использования с точками останова для включения/отключения полосы прокрутки в определённых точках останова
скрыть	логическое значение	верно	Автоматически скрывает полосу прокрутки после взаимодействия с пользователем
Горизонтальный класс	строка	"swiper-полоса прокрутки-горизонтальная"	Имя класса CSS, заданное как полоса прокрутки в горизонтальном Swiper
Класс блокировки	строка	"swiper-полоса прокрутки-блокировка"	Элемент полосы прокрутки - дополнительный CSS-класс, когда он отключен
scrollbarDisabledClass	строка	"swiper-полоса прокрутки-отключена"	Имя CSS-класса, добавляемого к контейнеру Swiper и элементу полосы прокрутки, когда полоса прокрутки отключена в точке останова
snapOnRelease	логическое значение	ложь	Установите значение`true`для привязки положения ползунка к слайдам при отпускании полосы прокрутки
Вертикальный класс	строка	"swiper-полоса прокрутки-вертикальная"	Имя класса CSS, заданное как полоса прокрутки в вертикальном Swiper

Методы полосы прокрутки

Свойства
swiper.dragEl	HTMLЭлемент	HTMLЭлемент перетаскиваемого элемента обработчика полосы прокрутки
swiper.el	HTMLЭлемент	HTMLЭлемент элемента контейнера полосы прокрутки
Методы
swiper.уничтожить()		Уничтожить полосу прокрутки
swiper.init()		Инициализировать полосу прокрутки
swiper.setTranslate()		Обновляет перевод полосы прокрутки
swiper.updateSize()		Обновляет дорожку полосы прокрутки и размеры обработчика

События полосы прокрутки

Имя	Аргументы	Описание
scrollbarDragEnd	(swiper, событие)	Событие будет запущено при перетаскивании перетаскиваемой полосы прокрутки
scrollbarDragMove	(swiper, событие)	Событие будет запущено при перетаскивании полосы прокрутки drag move
scrollbarDragStart	(swiper, событие)	Событие будет запущено при запуске перетаскиваемой полосы прокрутки drag start

Пользовательские свойства CSS полосы прокрутки

 {
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
}

Автоматическое воспроизведение

Параметры автозапуска

Имя	Тип	По умолчанию	Описание
задержка	номер	3000	Задержка между переходами (в мс). Если этот параметр не указан, автоматическая игра будет отключена Если вам нужно указать разную задержку для определённых слайдов, вы можете сделать это с помощью атрибута`data-swiper-autoplay`(в миллисекундах) на слайде. `<!-- hold this slide for 2 seconds --> <div class="swiper-slide" data-swiper-autoplay="2000">`
отключениевзаимодействия	логическое значение	верно	Установите значение`false`и автозапуск не будет отключаться после взаимодействия с пользователем (пролистывания), он будет запускаться каждый раз после взаимодействия
pauseOnMouseEnter	логическое значение	ложь	Если функция включена, автовоспроизведение будет приостановлено при наведении указателя (мыши) на контейнер Swiper.
Обратное направление	логическое значение	ложь	Включает автозапуск в обратном направлении
stopOnLastSlide	логическое значение	ложь	Включите этот параметр, и автоматическое воспроизведение будет остановлено, когда вы дойдёте до последнего слайда (не действует в режиме повтора)
Ожидание перехода	логическое значение	верно	При включённой функции автозапуска будет ожидаться завершение перехода оболочки. Можно отключить в случае использования Virtual Translate, когда ваш слайдер может не иметь перехода

Методы автозапуска

Свойства
swiper.приостановлено	логическое значение	Приостановлено ли автозапуск
swiper.running	логическое значение	Включено ли и работает ли автозапуск
swiper.TimeLeft	номер	Если автовоспроизведение приостановлено, отображается оставшееся время (в мс) до перехода к следующему слайду
Методы
swiper.pause()		Приостановить автозапуск
swiper.resume()		Возобновить автозапуск
swiper.start()		Запустить автозапуск
swiper.stop()		Остановить автозапуск

Автоматическое воспроизведение событий

Имя	Аргументы	Описание
автоматическое воспроизведение	(swiper)	Событие будет запущено при смене слайда с помощью автозапуска
Автозапуск	(swiper)	Событие будет запущено при приостановке автозапуска
Автоматическое воспроизведение	(swiper)	Событие будет запущено при возобновлении автозапуска
Автозапуск	(swiper)	Событие будет запущено при запуске автозапуска
Автоматическая остановка воспроизведения	(swiper)	Событие будет запущено при остановке автозапуска
Выбор времени автозапуска	(swiper, временное отклонение, процент)	Событие запускается непрерывно, пока включена функция автозапуска. Оно содержит оставшееся время (в миллисекундах) до перехода к следующему слайду и процент этого времени, связанный с задержкой автозапуска

Бесплатный режим

Параметры свободного режима

Имя	Тип	По умолчанию	Описание
включен	логическое значение	ложь	Включен ли бесплатный режим
Минимальная скорость	номер	0.02	Минимальная скорость касания, необходимая для запуска импульса в свободном режиме
импульс	логическое значение	верно	Если включен, слайд будет продолжать двигаться некоторое время после того, как вы его отпустите
Мгновенный скачок	логическое значение	верно	Установите значение`false`, если вы хотите отключить отскок импульса в бесплатном режиме
Мгновенное переключение	номер	1	Более высокое значение создает больший эффект отскока импульса
Мгновенный анализ	номер	1	Более высокое значение создает большее расстояние импульса после того, как вы отпустите ползунок
Мгновенная скорость	номер	1	Более высокое значение приводит к увеличению скорости вращения после отпускания ползунка
липкий	логическое значение	ложь	Установите значение включено, чтобы включить привязку к позициям слайдов в свободном режиме

Сетка

Параметры сетки

Имя Тип По умолчанию Описание

Имя	Тип	По умолчанию	Описание
заполнение	'строка'\|'столбец'	"столбец"	Может быть`'column'`или`'row'`. Определяет, как слайды должны заполнять строки, по столбцам или по строкам при использовании в режиме повтора убедитесь, что количество слайдов указано в требованиях к режиму повтора, или включите параметр`loopAddBlankSlides`
строки	номер	1	Количество строк слайдов для многострочной компоновки

заполнение

'строка'|'столбец'

"столбец"

Может быть'column'или'row'. Определяет, как слайды должны заполнять строки, по столбцам или по строкам

при использовании в режиме повтора убедитесь, что количество слайдов указано в требованиях к режиму повтора, или включите параметрloopAddBlankSlides

строки

номер

Количество строк слайдов для многострочной компоновки

Манипуляции

Удалить

Добавить

Модуль манипуляций добавляет полезные методы Swiper для управления слайдами. Его имеет смысл использовать только с версией Swiper Core, он не предназначен для использования с Swiper React или Vue.

Методы манипулирования

Методы
swiper.addSlide(индекс,слайды)		Добавьте новые слайды в нужный индекс. Слайды могут быть HTMLElement или строкой HTML с новым слайдом или массивом таких слайдов, например: `addSlide(1, '<div class="swiper-slide">Slide 10"</div>') addSlide(1, [ '<div class="swiper-slide">Slide 10"</div>', '<div class="swiper-slide">Slide 11"</div>' ]);`
swiper.appendSlide(слайды)		Добавьте новые слайды в конец. Слайды могут быть HTMLElement или HTML-строкой с новым слайдом или массивом таких слайдов, например: `appendSlide('<div class="swiper-slide">Slide 10"</div>') appendSlide([ '<div class="swiper-slide">Slide 10"</div>', '<div class="swiper-slide">Slide 11"</div>' ]);`
swiper.prependSlide(слайды)		Добавьте новые слайды в начало. Слайды могут быть HTMLElement или строкой HTML с новым слайдом или массивом таких слайдов, например: `prependSlide('<div class="swiper-slide">Slide 0"</div>') prependSlide([ '<div class="swiper-slide">Slide 1"</div>', '<div class="swiper-slide">Slide 2"</div>' ]);`
swiper.removeAllSlides()		Удалить все слайды
swiper.удаляет слайд(slideIndex)		Удалите выбранные слайды. slideIndex может быть числом с индексом слайда для удаления или массивом с индексами. `removeSlide(0); // remove first slide removeSlide([0, 1]); // remove first and second slides removeAllSlides(); // Remove all slides`

Параллакс

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

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

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

data-swiper-parallax- включить преобразование-перевод параллаксного перехода. Этот атрибут может принимать:
- number- значение в пикселях (как для заголовка, подзаголовка в примере выше) для перемещения элемента в зависимости от прогресса. В этом случае такой элемент будет перемещён на ± это значение в пикселях в зависимости от положения слайда (следующий или предыдущий)
- percentage- (как для «параллакс-фона») для перемещения элемента в зависимости от прогресса и его размера. В этом случае такой элемент будет перемещён на ± этот процент от его размера (ширины в горизонтальном направлении и высоты в вертикальном направлении) в зависимости от положения слайда (следующий или предыдущий). Таким образом, если ширина элемента составляет 400 пикселей, а вы указали data-swiper-parallax = «50%», то он будет перемещён на ± 200 пикселей
data-swiper-parallax-xто же самое, но для направления по оси x
data-swiper-parallax-yто же самое, но для направления по оси y
data-swiper-parallax-scale— коэффициент масштабирования элемента параллакса, когда он находится в «неактивном» (не на активном слайде) состоянии
data-swiper-parallax-opacity— непрозрачность элемента параллакса, когда он находится в «неактивном» (не на активном слайде) состоянии
data-swiper-parallax-duration- настраиваемая продолжительность перехода для элементов parallax

<div class="swiper">
  <!-- Parallax background element -->
  <div
    class="parallax-bg"
    style="background-image:url(path/to/image.jpg)"
    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>

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

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

Отложенная загрузка

Начиная с версии 9 у Swiper нет специального API для отложенной загрузки, так как он полагается на встроенную функцию отложенной загрузки браузера. Чтобы использовать отложенную загрузку, нам нужно просто установитьloading="lazy"для изображений и добавить элемент предварительной загрузки:

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

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

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

Ленивое изображение должно иметьloading="lazy"атрибут
Добавьте на слайд анимированный индикатор загрузки, который будет удалён автоматически после загрузки изображения:

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

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

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

Эффект затухания

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'fade'

Обратите внимание, чтоcrossFadeследует заменить наtrue, чтобы не видеть содержимое позади или под ним.

Параметры эффекта затухания

Имя	Тип	По умолчанию	Описание
Перекрестное затухание	логическое значение	ложь	Позволяет слайдам перекрестно исчезать

Эффект Coverflow

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

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

Имя	Тип	По умолчанию	Описание
глубина	номер	100	Смещение глубины в пикселях (слайды перемещаются по оси Z)
модификатор	номер	1	Множитель эффекта
вращать	номер	50	Поворот слайда в градусах
масштабирование	номер	1	Эффект масштабирования слайдов
Тени для слайдов	логическое значение	верно	Позволяет создавать тени на слайдах
растягивание	номер	0	Растянуть пространство между слайдами (в пикселях)

Эффект переворота

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'flip'

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

Имя	Тип	По умолчанию	Описание
Ограничение скорости	логическое значение	верно	Ограничение вращения краевых слайдов
Тени для слайдов	логическое значение	верно	Позволяет создавать тени на слайдах

Эффект куба

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

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

Имя	Тип	По умолчанию	Описание
тень	логическое значение	верно	Включает тень основного слайдера
shadowOffset	номер	20	Основное смещение тени в пикселях
Масштабирование теней	номер	0.94	Коэффициент масштабирования основной тени
Тени для слайдов	логическое значение	верно	Позволяет создавать тени на слайдах

Эффект карт

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'cards'

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

Имя	Тип	По умолчанию	Описание
perSlideOffset	номер	8	Расстояние смещения для каждого слайда (в пикселях)
perSlideRotate	номер	2	Угол поворота для каждого слайда (в градусах)
вращать	логическое значение	верно	Позволяет вращать карты
Тени для слайдов	логическое значение	верно	Позволяет создавать тени на слайдах

Творческий эффект

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'creative'

Параметры креативного эффекта

Имя	Тип	По умолчанию	Описание
limitProgress	номер	1	Ограничьте прогресс/смещение количеством боковых слайдов. Если`1`, то все слайды после предыдущего/следующего будут иметь одинаковое состояние. Если`2`, то все слайды после второго активного до/после будут иметь одинаковое состояние и т. д.
Далее	creativeffecttransform		Следующие преобразования слайдов. { // Array with translate X, Y and Z values translate: (string \| number)[]; // Array with rotate X, Y and Z values (in deg) rotate?: number[]; // Slide opacity opacity?: number; // Slide scale scale?: number; // Enables slide shadow shadow?: boolean; // Transform origin, e.g. `left bottom` origin?: string; }
перспектива	логическое значение	верно	Включите этот параметр, если ваши пользовательские преобразования требуют 3D-преобразований (`translateZ`,`rotateX`,`rotateY`)
Пред.	creativeffecttransform		Предыдущие преобразования слайдов. Принимает объект следующего типа: { // Array with translate X, Y and Z values translate: (string \| number)[]; // Array with rotate X, Y and Z values (in deg) rotate?: number[]; // Slide opacity opacity?: number; // Slide scale scale?: number; // Enables slide shadow shadow?: boolean; // Transform origin, e.g. `left bottom` origin?: string; }
Умножитель прогресса	номер	1	Позволяет многократно изменять прозрачность слайдов.
shadowPerProgress	логическое значение	ложь	Разделяет «непрозрачность» тени на каждом слайде в зависимости от`limitProgress`(только если включена трансформация теней). Например, при установке`limitProgress: 2`и включении`shadowPerProgress`непрозрачность тени будет равна`0.5`и`1`на двух слайдах рядом с активным. Если этот параметр отключен, все слайды, кроме активного, будут иметь тень с непрозрачностью`1`

Большие пальцы

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

Параметры Thumbs

Имя	Тип	По умолчанию	Описание
autoScrollOffset	номер	0	Позволяет задать, на скольких активных слайдах от края должна автоматически перемещаться прокрутка. Например, если установлено значение 1 и будет активирован последний видимый слайд (1 от края), то будет автоматически прокручиваться
Несколько активных больших пальцев	логическое значение	верно	При включении может быть активировано несколько миниатюр слайдов
slideThumbActiveClass	строка	"swiper-slide-thumb-активный"	Дополнительный класс, который будет добавлен к активированному слайду thumbs swiper
swiper	Любой	null	Экземпляр Swiper, используемый в качестве больших пальцев, или объект с параметрами Swiper для инициализации больших пальцев Swiper
thumbsContainerClass	строка	"swiper-thumbs"	Дополнительный класс, который будет добавлен в thumbs swiper

Методы Thumbs

Свойства
swiper.swiper	Любой	Swiper экземпляр thumbs swiper
Методы
swiper.init()		Инициализировать большие пальцы
swiper.обновление (начальное)		Обновите thumbs

Масштабирование

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

<div class="swiper">
  <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>

Все изображения, которые можно увеличивать, должны быть заключены в элемент div с классомswiper-zoom-container.
По умолчанию предполагается, что вы увеличиваете масштаб одного из элементовimg,pictureилиcanvas. Если вы хотите увеличить масштаб какого-то другого пользовательского элемента, просто добавьте к нему классswiper-zoom-target. Например:
```
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        
        <div
          class="swiper-zoom-target"
          style="background-image: url(...)"
        ></div>
      </div>
    </div>
  </div>
</div>
```
Вы можете переопределить параметрmaxRatioдля конкретных слайдов, используя атрибутdata-swiper-zoomв контейнере масштабирования.

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

Имя	Тип	По умолчанию	Описание
Контейнерный класс	строка	"swiper-zoom-контейнер"	Имя CSS-класса контейнера масштабирования
Ограниченный исходный размер	логическое значение	ложь	Если установлено значение true, изображение не будет масштабироваться более чем на 100% от исходного размера
Максимальная скорость	номер	3	Максимальный множитель масштабирования изображения
Минимизация	номер	1	Минимальный множитель масштабирования изображения
переключение	логическое значение	верно	Включение / отключение увеличения двойным касанием слайда
Увеличенный скользящий класс	строка	"swiper-слайд-масштабирование"	Имя CSS-класса увеличенного контейнера

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

Свойства
swiper.включен	логическое значение	Включен ли модуль масштабирования
swiper.scale	номер	Текущее соотношение масштаба изображения
Методы
swiper.отключить()		Отключить модуль масштабирования
swiper.enable()		Включить модуль масштабирования
swiper.in(соотношение)		Увеличьте изображение текущего активного слайда. При необходимости можно задать собственное соотношение сторон
swiper.out()		Уменьшите масштаб изображения текущего активного слайда
swiper.toggle(событие)		Переключение масштаба изображения текущего активного слайда

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

Имя	Аргументы	Описание
Изменение масштаба	(swiper, масштабирование, imageEl, slideEl)	Событие будет запущено при изменении масштаба

Управление с клавиатуры

←→

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

Имя	Тип	По умолчанию	Описание
включен	логическое значение	ложь	Установите значение`true`, чтобы включить управление с клавиатуры
onlyInViewport	логическое значение	верно	Когда он включен, он будет управлять ползунками, которые в данный момент находятся в окне просмотра
Отображение страницы	логическое значение	верно	Когда он включен, он позволяет осуществлять навигацию по клавиатуре с помощью клавиш Page Up и Page Down

Методы управления клавиатурой

Свойства
swiper.включен	логическое значение	Включено ли управление с клавиатуры
Методы
swiper.отключить()		Отключить управление с клавиатуры
swiper.enable()		Включить управление с клавиатуры

События клавиатуры

Имя	Аргументы	Описание
Нажатие клавиши	(swiper, ключевой код)	Событие будет запущено при нажатии клавиши

Управление колесиком мыши

↑

↓

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

Имя	Тип	По умолчанию	Описание
включен	логическое значение	ложь	Установите значение`true`, чтобы включить управление колесом мыши
eventsTarget	Любой	"контейнер"	Строка с CSS-селектором или HTML-элементом контейнера, принимающего события колесика мыши. По умолчанию это swiper
Силовая ось	логическое значение	ложь	Установите значение`true`для принудительного прокручивания колесика мыши по оси. Таким образом, в горизонтальном режиме колесико мыши будет работать только при горизонтальной прокрутке, а в вертикальном режиме — только при вертикальной прокрутке.
инвертировать	логическое значение	ложь	Установите значение`true`для инвертирования направления скольжения
Класс noMousewheelClass	строка	"swiper-без колеса мыши"	Прокрутка элементов с этим классом будет игнорироваться
Возможности выпуска	логическое значение	ложь	Установите значение`true`и swiper будет отключать событие прокрутки колесом мыши и позволять прокручивать страницу, когда swiper находится на краю (в начале или в конце)
чувствительность	номер	1	Множитель данных о колесе мыши, позволяет настроить чувствительность колесика мыши
thresholdDelta	нулевой\|номер	null	Минимальная дельта прокрутки колесика мыши для запуска смены слайда swiper
Время удержания порога	нулевой\|номер	null	Минимальная разница во времени прокрутки колесика мыши (в мс) для запуска смены слайдов в свипере

Методы управления колесиком мыши

Свойства
swiper.включен	логическое значение	Включено ли управление колесиком мыши
Методы
swiper.отключить()		Отключить управление колесиком мыши
swiper.enable()		Включить управление колесиком мыши

События Колеса мыши

Имя	Аргументы	Описание
прокрутка	(swiper, событие)	Событие будет запущено при прокрутке колеса мыши

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

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

Обратите внимание, что в соответствии с реализацией Virtual Slides онне работаетс модулем Grid иslidesPerView: 'auto'

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

Имя	Тип	По умолчанию	Описание
addSlidesAfter	номер	0	Увеличивает количество предварительно отрисованных слайдов после активного слайда
addSlidesBefore	номер	0	Увеличивает количество предварительно отрисованных слайдов перед активным слайдом
Кэш	логическое значение	верно	Включает кэш DOM для рендеринга HTML-элементов слайдов. После рендеринга они будут сохранены в кэше и использованы повторно.
включен	логическое значение	ложь	Включены ли виртуальные слайды
Внешний рендеринг	функция (данные)		Функция для внешнего рендеринга (например, с использованием другой библиотеки для обработки манипуляций с DOM и состояния, такой как React.js или Vue.js). В качестве аргумента она принимает`data`объект со следующими свойствами: `offset`- смещение влево / вверх в пикселях `from`- индекс первого слайда, необходимого для рендеринга `to`- индекс последнего слайда, необходимого для рендеринга `slides`- массив с элементами слайдов для рендеринга
renderExternalUpdate	логическое значение	верно	Если он включен (по умолчанию), то обновит макет Swiper сразу после вызова renderExternal. Полезно отключать и обновлять Swiper вручную при использовании с библиотеками рендеринга, которые выполняют рендеринг асинхронно
renderSlide	функция (слайд,указатель)		Функция для отображения слайда. В качестве аргумента она принимает текущий элемент слайда для`slides`массива и номер индекса текущего слайда. Функция должна возвращать внешний HTML-код слайда или HTML-элемент слайда.
слайды	T[]	[]	Массив со слайдами

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

Свойства
swiper.cache	объект	Объект с кэшированными элементами slides HTML
swiper.from	номер	Индекс первого отрисованного слайда
swiper.слайды	T[]	Массив с элементами слайда, передаваемыми параметром`virtual.slides`
swiper.to	номер	Индекс последнего отрисованного слайда
Методы
swiper.appendSlide(слайд)		Добавить слайд.`slides`Это может быть один слайд или массив таких слайдов. Только для версии Core (в React и Vue это нужно делать путём изменения массива/данных/источника слайдов)
swiper.добавитьslide(слайд)		Предварительный слайд.`slides`может быть отдельным слайдом или массивом таких слайдов. Только для версии Core (в React и Vue это нужно делать путём изменения массива/данных/источника слайдов)
swiper.removeAllSlides()		Удалить все слайды Только для версии Core (в React и Vue это нужно делать путём изменения массива/данных/источника слайдов)
swiper.removeSlide(индексы скольжения)		Удалите конкретный слайд или слайды.`slideIndexes`Это может быть число с индексом слайда для удаления или массив с индексами. Только для версии Core (в React и Vue это нужно делать путём изменения массива/данных/источника слайдов)
swiper.обновить(принудительно)		Обновить состояние виртуальных слайдов

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

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

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    ...
    <div class="swiper-slide">Slide 100</div>
  </div>
</div>
<script>
  const swiper = new Swiper('.swiper', {
    virtual: {
      enabled: true,
    },
  });
</script>

https://myweb.site/

https://myweb.site/#слайд-2

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

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

<div class="swiper">
  <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>

const swiper = new Swiper('.swiper', {
  //enable hash navigation
  hashNavigation: true,
});

Имя	Тип	По умолчанию	Описание
getSlideIndex	функция (swiper,хэш)		Предназначен для использования с виртуальными слайдами, когда невозможно найти слайд в DOM по хешу (например, он ещё не отобразился)
replaceState	логическое значение	ложь	Работает в дополнение к hashnav, заменяя текущий URL-адрес новым вместо добавления его в историю
Состояние наблюдения	логическое значение	ложь	Задайте значение`true`для включения навигации по слайдам (при включенном hashnav) с помощью истории браузера или путем непосредственного указания хэша в адресе документа

Имя	Аргументы	Описание
Хэш-обмен	(swiper)	Событие будет запущено при изменении хэша окна
Набор хэшей	(swiper)	Событие будет запущено, когда swiper обновит хэш

https://myweb.site/

https://myweb.site/слайд-2/

Имя	Тип	По умолчанию	Описание
включен	логическое значение	ложь	Включает плагин History.
keepQuery	логическое значение	ложь	Сохраняйте параметры запроса при изменении URL браузера.
Клавиша	строка	"слайды"	URL-ключ для слайдов
replaceState	логическое значение	ложь	Работает в дополнение к hashnav или истории, заменяя текущий URL-адрес новым вместо добавления его в историю
root	строка	''	Корневая страница Swiper, полезная для указания, когда вы используете режим истории Swiper не на главной странице сайта. Например, это может быть`https://my-website.com/`или`https://my-website.com/subpage/`или`/subpage/`

Контроллер

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

Имя	Тип	По умолчанию	Описание
Автор:	«слайд»\|«контейнер»	"слайд"	Определяет способ управления другим слайдером: слайд за слайдом (относительно сетки другого слайдера) или в зависимости от всех слайдов/контейнера (в зависимости от общего процента слайдера).
управление	Любой		Передайте сюда другой экземпляр Swiper или массив с экземплярами Swiper, которыми должен управлять этот Swiper. Также принимает строку с CSS-селектором элемента Swiper или HTMLElement элемента Swiper
обратный	логическое значение	ложь	Установите значение`true`, и управление будет осуществляться в обратном направлении

Методы контроллера

Свойства
swiper.control	Любой	Передайте сюда другой экземпляр Swiper или массив с экземплярами Swiper, которыми должен управлять этот Swiper

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

Имя	Тип	По умолчанию	Описание
Контейнерное сообщение	нулевая\|строка	null	Сообщение для программ чтения с экрана для внешнего контейнера swiper
Контейнерная роль	нулевая\|строка	null	Значение атрибута «роль», которое необходимо задать для контейнера свипера
containerRoleDescriptionMessage	нулевая\|строка	null	Сообщение для программ чтения с экрана, описывающее роль внешнего контейнера swiper
включен	логическое значение	верно	Включает A11y
firstSlideMessage	строка	"Это первый слайд"	Сообщение для программ чтения с экрана для предыдущей кнопки, когда swiper находится на первом слайде
ID	null\|строка\|число	null	Значение атрибута`id`должно быть задано для swiper-wrapper. Если`null`будет сгенерировано автоматически
itemRoleDescriptionMessage	нулевая\|строка	null	Сообщение для программ чтения с экрана, описывающее роль элемента slide
lastSlideMessage	строка	"Это последний слайд"	Сообщение для программ чтения с экрана для кнопки "Далее", когда swiper находится на последнем слайде
nextSlideMessage	строка	"Следующий слайд"	Сообщение для программ чтения с экрана для кнопки "Далее"
Класс уведомлений	строка	"swiper-уведомление"	Имя CSS-класса уведомления A11y
paginationBulletMessage	строка	«Перейти к слайду{{index}}»	Сообщение для программ чтения с экрана для маркера с одной страницей
prevSlideMessage	строка	"Предыдущий слайд"	Сообщение для программ чтения с экрана для предыдущей кнопки
scrollOnFocus	логическое значение	верно	Позволяет прокручивать слайд, на котором был сделан фокус
slideLabelMessage	строка	'{{index}}/{{slidesLength}}'	Сообщение для программ чтения с экрана с описанием метки элемента слайда
slideRole	строка	"группа"	Значение атрибута swiper slide`role`

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

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

Использование модулей JS

Если вы используете в своём проекте сборщик с поддержкой модулей JS, вы можете импортировать только те модули, которые вам нужны:

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

// Now you can use Swiper
const swiper = new Swiper('.swiper', {
  // Install modules
  modules: [Navigation, Pagination, Scrollbar],
  speed: 500,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // ...
});

Экспортируются следующие модули:

Virtual- Модуль виртуальных слайдов
Keyboard- Модуль управления клавиатурой
Mousewheel- Модуль управления колесиком мыши
Navigation- Навигационный модуль
Pagination- Модуль разбиения на страницы
Scrollbar- Модуль полосы прокрутки
Parallax- Модуль Параллакса
FreeMode- Модуль Свободного режима
Grid- Модуль сетки
Manipulation- Модуль управления слайдами (только для базовой версии)
Zoom- Модуль масштабирования
Controller- Модуль контроллера
A11y- Модуль специальных возможностей
History- Модуль навигации по истории
HashNavigation- Модуль навигации по хэшу
Autoplay- Модуль автозапуска
EffectFade- Модуль эффекта затухания
EffectCube- Модуль эффекта куба
EffectFlip- Модуль эффекта переворота
EffectCoverflow- Модуль эффекта Coverflow
EffectCards- Модуль эффектов карт
EffectCreative- Модуль создания креативных эффектов
Thumbs- Модуль Thumbs

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

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

Загрузите и распакуйтерепозиторий Swiper GitHubв локальную папку
Установить Node.js (если не установлен)
Теперь нам нужно установить необходимые зависимости. Перейдите в папку с загруженным и распакованным репозиторием Swiper и выполните в терминале:
```
$ npm install
```

Открытьscripts/build-config.jsфайл:

module.exports = {
  // remove modules you don't need
  modules: [
    'virtual',
    'keyboard',
    'mousewheel',
    'navigation',
    'pagination',
    'scrollbar',
    'parallax',
    'zoom',
    'controller',
    'a11y',
    'history',
    'hash-navigation',
    'autoplay',
    'thumbs',
    'free-mode',
    'grid',
    'manipulation',
    'effect-fade',
    'effect-cube',
    'effect-flip',
    'effect-coverflow',
    'effect-creative',
    'effect-cards',
  ],
};

Теперь мы готовы создать пользовательскую версию Swiper:
```
$ npm run build:prod
```
Вот и всё. Сгенерированные файлы CSS и JS и их сжатые версии будут доступны в папкеdist/

Определения TypeScript

Swiper полностью типизирован, он экспортируетSwiperиSwiperOptionsтипы:

// main.ts
import Swiper from 'swiper';
import { SwiperOptions } from 'swiper/types';

const swiperParams: SwiperOptions = {
  slidesPerView: 3,
  spaceBetween: 50,
};

const swiper = new Swiper('.swiper', swiperParams);

Вы также можете просмотреть автоматически сгенерированныеопределения TypeScriptдля всех типов, параметров, свойств и методов.

CSS, CSS3, grid, title, Слайдер, CSS Анимация, Javascript, HTTPS, Анимация, html

Связь Grid позиционирования с другими методами позиционирования

CSS Grid Layout спроектирован таким образом, чтобы работать вместе с другими частями CSS и составлять с ними законченную систему создания макетов страниц. В рамках этого руководства, мы объясним, каким образом сочетать гриды с другими техниками, которыми Вы, возможно, уже пользуетесь в своей работе.

Grid и flexbox

Основное различие между CSS Grid Layout и CSS Flexbox Layout в том, что flexbox предназначен для позиционирования элементов в одном направлении, то есть, либо в строке, либо в колонке. Grid же был разработан для позиционирования элементов в двумерной системе, то есть, для одновременного позиционирования и в строке, и в колонке. Однако, в двух спецификациях есть некоторые общие черты, и если вы уже научились укрощать flexbox, вы увидите сходства, которые помогут вам разобраться и с Grid.

Одномерное vs Двумерное позиционирование

Простой пример поможет нам продемонстрировать разницу между одно- и двумерным позиционированием.

В пером примере мы воспользуемся flexbox для того, чтобы разместить несколько блоков. Предположим, что у нас есть пять дочерних элементов в контейнере, зададим им значения flex-свойств таким образом, чтобы их размер увеличивался и уменьшался, начиная с базового в 200px.

Также установим свойство flex-wrap в значение wrap . Это приведёт к тому, что если свободного пространства в нашем контейнере будет не хватать для размещения элемента в 200px, наши элементы спокойно перейдут на новую строку.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper > div {
flex: 1 1 200px;
}

На картинке вы видите, что два элемента перешли на новую строку. Эти элементы поделили свободное пространство между собой, а не выровнялись по элементам над ними. Происходит это потому, что каждая новая строка (или колонка, если мы работаем с колонками) становится новым flex-контейнером. А во flex-контейнере распределение свободного пространства действует в рамках всей строки.

Общий вопрос заключается в том, как заставить наши перебежавшие элементы выровняться по элементам сверху. Как раз в этом случае и нужен метод размещения элементов в двумерной системе: требуется выравнивание и по строке, и по колонке, а для этого на помощь спешит Grid.

Тот же макет, но с CSS гридами

В примере ниже мы создаём тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в 1fr . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как видите, наши элементы лежат в жёсткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

Если вы колеблетесь, что выбрать - flexbox или grid, задайте себе простой вопрос:

нужно управлять размещением элементов в строке или в колонке - используем flexbox
нужно управлять размещением элементов в строке и в колонке – используем grid

Что важнее: контент или макет?

В дополнение к различию между позиционированию в одном направлении и позиционированию в двух направлениях, существует ещё один способ решить, нужен ли вам макет, основанный на flexbox или макет, основанный на гридах. Flexbox работает исходя из размеров контента. Идеальный случай использования flexbox - когда у вас есть набор элементов, а вам нужно распределить их в контейнере равномерно. Вы позволяете размеру содержимого элементов решить, сколько пространства должен забрать каждый элемент. Если элементы переходят на новую строку, они забирают для себя пространство, исходя из своих размеров и того свободного места, которое есть в этой строке .

Грид работает, исходя из макета. Когда вы используете CSS Grid Layout, вы создаёте структуру и затем размещаете элементы именно в этой структуре или же позволяете правилам авто-размещения разместить элементы в грид-ячейках в соответствии с жёстко заданной сеткой. Конечно, существует возможность создавать треки, подстраивающиеся под размер контента, но при этом они также меняют саму структуру.

Поэтому, если вы используете flexbox и вдруг обнаруживаете, что ограничиваете эластичность элементов, возможно, вам нужно посмотреть в сторону CSS Grid Layout. Например, в том случае, если вы процентами подгоняете ширину flex-элемента, чтобы выровнять его по элементам в строке сверху. В такой ситуации гриды кажутся более оптимальным выбором.

Выравнивание блоков

Самой волнующей функциональностью flexbox для многих из нас была возможность впервые управлять выравниванием блоков. С помощью flexbox можно легко отцентрировать блок на странице. Флекс-элементы способны растягиваться на всю длину контейнера - значит, колонки равной высоты из мечты стали реальностью. Существовал целый ряд вещей, которые нам хотелось сделать очень давно, и для воплощения которых приходилось изобретать различные хаки.

Свойства выравнивания из спецификации flexbox были добавлены в новую спецификацию, названную Box Alignment Level 3. А это означает, что они могут использоваться и в других спецификациях, в том числе и в Grid Layout.

Дальше в нашем руководстве мы подробно рассмотрим выравнивание блоков Box Alignment и то, как оно работает в Grid Layout, а здесь давайте рассмотрим два простых примера, и сравним flexbox и гриды.

В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обёртки wrapper установлено свойство min-height, и оно задаёт высоту flex-контейнера. Мы установили свойство align-items flex-контейнера в значение flex-end , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства align-self для box1 таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для box2 свойство align-self установлено таким образом, что блок перепрыгнет в начало flex-контейнера.

<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>

.wrapper {
display: flex;
align-items: flex-end;
min-height: 200px;
}
.box1 {
align-self: stretch;
}
.box2 {
align-self: flex-start;
}

Тем временем в параллельной вселенной: выравнивание в CSS Гридах

Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо flex-start и flex-end мы задаём start и end . В случае с макетом на гридах мы выравниваем grid-row элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.

<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(3,1fr);
align-items: end;
grid-auto-rows: 200px;
}.box1 {
align-self: stretch;
}
.box2 {
align-self: start;
}

Единица `fr` и `flex-basis`

Мы уже видели, как работает единица fr в случае пропорционального распределения доступного пространства между грид-треками в грид-контейнере. При комбинировании frс функцией minmax() мы получаем поведение, очень похожее на свойство flex в flexbox - и при этом по-прежнему можем создавать макет в двумерной системе.

Если вернуться к примеру, демонстрирующему различия между одно-и двумерным позиционированиями, можно увидеть, что существует также и различие в самом способе того, как две техники работают с отзывчивыми макетами. С макетом на flex, если мы уменьшаем или увеличиваем размер окна, flexbox аккуратно перераспределяет количество элементов в каждой строке в соответствии с доступным пространством. Так, если у нас достаточно места, чтобы разместить все пять наших элементов в одной строке, они и будут размещены в одной строке. Если же контейнер узкий, то в строке у нас будет место только для одного элемента.

В сравнении грид-версия всегда содержит три трека-колонки. Эти треки-колонки будут расширяться и сужаться, но их всегда будет три, раз мы запросили три при задании грида.

Автозаполнение грид-треков

Можно создать эффект, похожий на поведение flexbox, и при этом по-прежнему держать контент в жёсткой сетке из строк и колонок, если задать структуру треков, используя repeat-нотацию и свойства auto-fill и auto-fit.

В примере ниже мы используем ключевое слово auto-fill вместо целого числа в repeat-нотации и задаём структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}

Переменное количество треков

Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя auto-fill и функцию minmax(). В примере ниже мы создаём автозаполненные треки с помощью minmax. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим 1fr. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум 1fr как инструкцию распределить оставшееся свободное пространство между этими блоками.

<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Собственно, теперь у нас есть возможность создавать гриды с переменным количеством или с переменным размером треков и при этом по-прежнему держать элементы в жёсткой сетке из строк и колонок.

Гриды и абсолютно позиционированные элементы

Грид взаимодействует с абсолютно позиционированными элементами, что отнюдь не бесполезно, если вы хотите разместить элемент внутри грида или грид-области. В спецификации описано поведение грида и тогда, когда грид-контейнер является контейнерным блоком (containing block) и тогда, когда грид-контейнер - родительский элемент для абсолютно позиционированного элемента.

Грид-контейнер как контейнерный блок

Для того, чтобы превратить грид-контейнер в контейнерный блок вам нужно добавить ему свойство position со значением relative. Если после этого задать какому-нибудь грид-элементу position:absolute , грид-контейнер станет контейнерным блоком для данного элемента.

В примере ниже у нас есть блок-обёртка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещён в гриде с помощью привязки к грид-линиям. У грид-контейнера position:relative , поэтому он становится контекстом позиционирования для нашего третьего элемента.

<div class="wrapper">
   <div class="box1">One</div>
   <div class="box2">Two</div>
   <div class="box3">
    Этот блок абсолютно позиционирован.
В нашем примере грид-контейнер является контейнерным блоком, поэтому значения сдвига абсолютного позиционирования отсчитываются от внешнего края той области, в которой размещён элемент.
   </div>
   <div class="box4">Four</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-auto-rows: 200px;
grid-gap: 20px;
position: relative;
}
.box3 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
position: absolute;
top: 40px;
left: 40px;
}

Вы видите, что наш элемент занимает область от колоночной грид-линии 2 до колоночной грид-линии 4 и начинается после строчной линии 1. С помощью свойств left и top мы сдвигаем его относительно этой области. В то же время, он изымается из потока так же, как и любой другой элемент с абсолютным позиционированием, поэтому правила авторазмещения теперь помещают другие элементы на его место. Абсолютное позиционирование нашего элемент также не приводит к появлению новой строки.

Попробуйте удалить position:absolute из правил для .box3 , и увидите, как он размещался бы без абсолютного позиционирования.

Грид-контейнер в качестве родительского элемента

Если у абсолютно позиционированного элемента в качестве родительского контейнера выступает грид, не создающий новый контекст позиционирования, наш элемент также вытаскивается из потока, как и в предыдущем примере. Но в этом случае контекстом позиционирования будет любой элемент, который как раз и создаёт этот контекст позиционирования. Словом, если в нашем примере мы уберём position:relative из блока-обёртки, контекстом позиционирования станет область просмотра, что хорошо видно на рисунке ниже.

Ещё раз: наш элемент больше не занимает пространство в грид-макете и не влияет на то, как располагаются другие элементы при авторазмещении.

А что если родительский элемент - это грид-область?

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

Задаём .box3 свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига. В данном случае контекстом позиционирования является грид-область.

<div class="wrapper">
   <div class="box1">One</div>
   <div class="box2">Two</div>
   <div class="box3">Three
       <div class="abspos">
        Этот блок абсолютно позиционирован. В данном примере контекстом позиционирования является грид-область, поэтому значения сдвига отсчитываются от внешних краёв грид-области.
       </div>
   </div>
   <div class="box4">Four</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-auto-rows: 200px;
grid-gap: 20px;
}
.box3 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
position: relative;
}
.abspos {
position: absolute;
top: 40px;
left: 40px;
background-color: rgba(255,255,255,.5);
border: 1px solid rgba(0,0,0,0.5);
color: #000;
padding: 10px;
}

Грид и `display:contents`

Последнее, о чем нужно упомянуть, говоря о взаимодействии гридов с другими спецификациями, касающимися позиционирования элементов, - это взаимодействие между CSS Grid Layout и display:contents. Значение contents свойства display - новое свойство CSS, которое описывается в спецификации Display следующим образом:

“Сам элемент не генерирует никаких блоков (боксов), но его дочерние элементы и его псевдо-элементы по-прежнему генерируют блоки, в установленном порядке. Относительно генерации и позиционирования блоков элемент должен восприниматься так, как если бы он полностью замещался своими дочерними элементами и псевдо-элементами в дереве документа.”

Если вы пишете для элемента display:contents , блок (бокс), который он должен создать в дереве документа исчезает, а вот блоки его дочерних элементов и его псевдо-элементов переходят на один уровень вверх. А значит это то, что дочерние элементы грид-элемента могут сами стать грид-элементами. Звучит непонятно? Давайте разберёмся на простом примере. В разметке ниже у нас есть грид. Первый элемент этого грида настроен так, чтобы занимать все три трека-колонки. У него есть три вложенных элемента. Поскольку эти вложенные элементы не являются прямыми потомками грида, они не становятся частью грид-макета и отображаются, как обычные блоки.

<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
<div class="nested">c</div>
</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
}

Если мы теперь добавим правило display:contents для box1, блок этого бокса исчезнет, зато дочерние элементы станут грид-элементами и будут расположены в соответствии с правилами авторазмещения.

<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
<div class="nested">c</div>
</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div> 

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
display: contents;
}

Таким образом мы можем заставить вложенные элементы вести себя, словно они часть грида (и в некотором смысле имитация того поведения, которое должны будут реализовать подгриды (subgrids), когда руки разработчиков браузеров до них доберутся). Точно так же можно использовать display:contents с flexbox, чтобы вложенные элементы становились flex-элементами.

Flexbox, grid