Перейти к основному содержимому

Слайдер заездов

Обложка на разводящей

Обложка

"Другие заезды" на деталке. Отобразятся все заезды, кроме текущего.

Другие заезды

Заполнение​

Тайтл, дескрипшен - на месте.

На каждой из страниц, где есть этот блок, в Атрибутах страницы нужно указать:

  • мероприятие
  • актуальную коллекцию частей Части мероприятия: Образовательные заезды и арт-школы NEW | ...

см. актуальные названия коллекций тут

см. заполнение коллекции

Полный список полей, который тянется из коллекции:​

к сведению

Подложка карточки - темного цвета. Если заполнена картинка - отобразится она. Если заполнено видео - отобразится и оно, на слой выше, чем картинка.

Видео желательно загружать квадратное ИЛИ в крайнем случае вертикальное. Если видео вертикальное, оно обрежется сверху/снизу и встанет 100% по ширине. Если видео горизонтальное, оно встанет 100% по ширине, а сверху/снизу будут уши.

Механика и инфо для QA​

Пачки​

Карточки разделены на пачки. Размеры пачек:

  • телефон - 1
  • планшет - 2
  • десктоп - 3

Стрелки (десктоп) и точки пагинации листают так, чтобы левый край выбранной пачки прижался к левому краю экрана.

Пример 1, десктоп, 6 карточек.

  • карточка 1 у левого края экрана, видно 1, 2, 3
  • жмем стрелку вправо
  • листает сразу на 3 вперед
  • теперь видно 4, 5, 6

Пример 2, десктоп, 6 карточек

  • карточка 2 у левого края экрана, видно 2, 3, 4
  • жмем стрелку вправо
  • листает лишь на 2 вперед
  • теперь видно 4, 5, 6

Таким образом, выбрав следующую пачку (4,5,6), мы пролистали именно на нее.

Точки и линия пагинации внизу​

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

Пачка считается текущей, если у этой пачки видно больше карточек, чем у других. Например, десктоп, 6 карточек, на экране видно 2, 3, 4. Текущей пачкой считается 1, потому что у нее видно 2 карточки, в отличие от второй пачки, у которой видна лишь одна карточка.

Если у двух пачек видно одинаковое количество карточек, текущей считается та, которая лежит правее. Например, планшет, видно 2, 3. Видно по одной карточке из первой и второй пачки. Текущей будет считаться вторая пачка, потому что лежит правее.

Автосвайп​

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

  2. Когда дойдет до конца - происходит автосвайп вправо.

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

  4. Когда юзер нажмет на стрелки (десктоп) ИЛИ нажмет мышкой в область карточек ИЛИ дотронется пальцем до области карточек - анимация и темный цвет с линий пагинации полностью пропадает.

  5. Если пользователь проскроллит так, чтобы стало видно меньше 30% высоты блока, а потом вернется обратно - анимация возобновится.