Несколько карточек

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

Описание

Опция perPage определяет, сколько слайдов будет видно одновременно на экране. Это основной способ создания слайдеров с несколькими элементами в видимой области.

Основные возможности

• Фиксированное количество слайдов: задайте perPage: 2, perPage: 3 и т.д.
• Автоматический расчет размеров: слайды равномерно распределяются по ширине контейнера
• Работа с зазорами: используйте gap для создания отступов между слайдами
• Навигация: переключение происходит группами слайдов (по perPage за раз)

Код примеров

perPage: 1 (по умолчанию)

Классический слайдер “один слайд на экран”. Подходит для главных баннеров, галерей изображений в полную ширину.

perPage: 2

Показывает два слайда одновременно. Идеально для карточек товаров, портфолио, списков статей.

perPage: 3 с зазором

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

perPage: 4 (grid-style)

Четыре слайда в grid-стиле. Подходит для плотных списков, логотипов партнеров, большого количества элементов.

perPage: 2, loop: true, 1 слайд (граничный случай)

В разметке один слайд. При loop: true слайдер клонирует его, чтобы заполнить видимую область и обеспечить бесконечную прокрутку.

HTML разметка

CSS стили

Важные моменты

1. Навигация по группам: при perPage: 3 слайдер будет листать по 3 слайда за раз
2. Gap и размеры: зазор gap учитывается при расчете ширины слайдов автоматически
3. Последняя группа: если слайдов меньше чем perPage, они все равно отобразятся корректно
4. Drag: при включенном drag можно свободно перетаскивать слайды, не ограничиваясь группами

Когда использовать

• perPage: 1 — главные баннеры, hero-секции, полноэкранные галереи
• perPage: 2 — карточки товаров, портфолио, сравнение
• perPage: 3 — списки статей, категории, средние каталоги
• perPage: 4+ — логотипы, теги, большие списки элементов

Связанные примеры

• Responsive Example — адаптивное изменение perPage на разных экранах
• Loop Mode — бесконечная прокрутка с несколькими слайдами
• Drag Navigation — перетаскивание с perPage