Слайдеры
Оглавление:
Одиночный слайдер
Двойной слайдер
Тройной слайдер
Четверной слайдер
Четверной слайдер с текстом
Работа с тенями
В случаях, когда необходимо расширить пространство вокруг слайдера, которое не будет обрезаться, можно использовать модификатор dst-container--recess у контейнера swiper-слайдера.
Слайдер без recess модификатора
Слайдер с recess модификатором
Auto height
При использовании autoHeight хочется избежать проблем с Cumulative Layout Shift (CLS), особенно когда размер страницы изменяется после отработки скриптов. Для исправления можно использовать модификатор dst-container--auto-height-fix для элемента с классом .swiper внутри dst.
Можно сравнить результаты с и спользованием модификатора и без, выключив JS и обновив страницу. Слайдер с модификатором будет повторять размер первого слайда при загрузке страницы, после отработки скриптов будет работать в обычном режиме.
Работает пока только для слайдеров с одним видимым слайдом в области просмотра
Слайдер с фиксом
Слайдер без фикса
Составной слайдер (в колонку)
Составной слайдер (в ряд)
Карусель
WebGL
Типы пагинации
Динамическая (стандарт)
Множественная
Виды пагинации
Пагинация под слайдером
Пагинация поверх слайдера
Темы
Стандартная
Основная (primary)
Полупрозрачная
Современный