Объёмный поворот

3D трансформация в виде куба.

Переключайте грани стрелками или перетаскиванием. Счётчик показывает текущую грань; кнопка мобильного вида позволяет проверить эффект на ширине 375 px.

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

Размеры контейнера

Грани куба позиционируются абсолютно и не задают высоту родителю. Задайте размер слайдера через height или aspect-ratio, а треку — height: 100%. В примере используется квадрат шириной до 280 px, который уменьшается на узких экранах.

Стрелки и контейнер счётчика находятся в HTML и передаются в опциях arrows и pagination. Полный код рабочего примера доступен во вкладках под демонстрацией.

Картинки с loading="lazy"

Если в слайдах стоят обычные <img src="..." loading="lazy">, браузер может не начать загрузку до появления изображения у края viewport. На вращающейся грани куба это иногда даёт пустой кадр на долю секунды.

Включите опцию nativeLazyAdjacent (по умолчанию срабатывает в начале перехода к целевому слайду; соседей при первой отрисовке страницы можно добавить через onInit: true):

Подробности и все варианты — в справочнике опций: nativeLazyAdjacent.