Динамическая 3D карусель

Модификация позволяет добавить динамическую 3D карусель с несколькими рядами фотографий
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
102160886
Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery
1 шаг
Добавляем блок T123 и копируем в него код
Скопировать код
Создаем Zero Block и открываем редактор
  1. Добавляем html-элемент
  2. Задаем ему позиционирование CONTAINER: WINDOW (X: LEFT, Y: TOP)
  3. Задаем размеры ширины и высоты по 100%
  4. Копируем код в html-элемент
2 шаг
Скопировать код
Загружаем изображения в Zero Block
  1. Добавляем необходимое количество изображений
  2. Задаем им одинаковый класс .tistols-card
3 шаг
4 шаг
В коде есть комментарий для каждого параметра, можете настроить необходимые значения.
Настраиваем параметры эффекта
<!--TS37 - Модификация для Тильды. Динамическая 3D карусель https://mod.tistols.com/multi-carousel -->
<script type="module" crossorigin src="https://mods.tistols.com/mods/multi-carousel/multi-carousel-1yk8iy2.js"></script>
<!--TS37 - Модификация для Тильды. Динамическая 3D карусель https://mod.tistols.com/multi-carousel -->
<div class="tistols-3d-carousel"
     data-card-selector=".tistols-card"
     data-radius="300px"
     data-radius-from-parent="true"
     data-rows="3"
     data-row-gap="1.1"
     data-spacing="300px"
     data-auto-rotate="true"
     data-rotate-speed="12"
     data-axis="y"
     data-perspective="1200"
     data-autoscale="false"
     data-card-width="150px"
     data-card-height="150px"
     data-gap="0"
     data-inertia="0.9"
     data-start-angle="0"
     data-ease-ms="700"
     data-fill-rows="true"
     data-max-clones-per-row="64"
     data-uniform-radius="true"
     data-row-shift="true"
     data-row-shift-factor="0.5"
     data-wheel-speed="0.05"
     data-wheel-invert="false"
     data-wheel-inertia="0.9"
     data-scroll-mode="window"
     data-scroll-speed="0.005"
     data-scroll-invert="false"
     data-scroll-inertia="0.3"
     data-rotate-x="0"
     data-rotate-y="0"
     data-rotate-z="0"
     data-place-inside-parent="true">
</div>

<!--
Список data-* и что они делают (текущие значения показаны рядом):
data-card-selector=".tistols-card"  — CSS-селектор карточек, которые будут собраны в карусель.
data-radius="300px"  — Радиус карусели в px или % (например "35%"). Если указано число с px — используется как фиксированный радиус.
data-radius-from-parent="false"  — Если true, радиус = половина ширины родительского блока. (Альтернатива: data-radius="parent".)
data-rows="3"  — Количество рядов в карусели (целое число ≥1).
data-row-gap="1.1"  — Множитель вертикального расстояния между рядами (умножается на высоту карточки).
data-spacing="300px"  — Горизонтальный отступ (spacing) между карточками — может быть в px или % (влияет на заполнение круга).
data-auto-rotate="true"  — Включает автоматическое вращение карусели.
data-rotate-speed="12"  — Скорость авто-вращения (в градусах в секунду).
data-axis="y"  — Ось, вокруг которой происходит разворачивание карточек ('y' — стандартная 3D-карусель).
data-perspective="1200"  — Значение CSS perspective (px) используемое визуально для глубины.
data-autoscale="false"  — Включает автомасштабирование карточек под размер контейнера (true/false).
data-card-width="150px"  — Базовая ширина карточки (px или %).
data-card-height="150px"  — Базовая высота карточки (px или %).
data-gap="0"  — Дополнительный угловой/смещающий параметр (используется в расчётах углов).
data-inertia="0.9"  — Коэффициент инерции для обработки дрэг/скролл (0..1).
data-start-angle="0"  — Начальный угол карусели (в градусах).
data-ease-ms="700"  — Время easing в миллисекундах (параметр сохранён в конфиге; используется при анимациях).
data-fill-rows="true"  — Если true — ряды будут заполняться клонами карточек до требуемого количества (wrap/tiling).
data-max-clones-per-row="64"  — Максимальное количество клонов в одном ряду при заполнении.
data-uniform-radius="true"  — Если true — все ряды используют одинаковый радиус; если false — радиус подгоняется под вертикальную позицию ряда.
data-row-shift="true"  — Включает сдвиг нечётных рядов (чтобы ряды не были строго в одной вертикали).
data-row-shift-factor="0.5"  — Фактор сдвига ряда (доля от шага между элементами, 0..1).
data-wheel-speed="0.05"  — Чувствительность колеса мыши при прокрутке внутри блока.
data-wheel-invert="false"  — Инвертировать направление реакции на колесо мыши.
data-wheel-inertia="0.9"  — Инерция, применяемая к скорости, полученной от колесика.
data-scroll-mode="window"  — Режим считывания прокрутки; по умолчанию слушается прокрутка окна ('window').
data-scroll-speed="0.005"  — Чувствительность реакции на вертикальный скролл (градусы на пиксель).
data-scroll-invert="false"  — Инвертировать направление реакции на вертикальный скролл.
data-scroll-inertia="0.3"  — Инерция, применяемая к импульсу от прокрутки страницы.
data-rotate-x="0"  — Наклон сцены по оси X (градусы).
data-rotate-y="0"  — Наклон сцены по оси Y (градусы).
data-rotate-z="0"  — Наклон сцены по оси Z (градусы).
data-place-inside-parent="true"  — Если true — скрипт попытается позиционировать блок абсолютно внутри родителя и центрировать (удобно для размещения в адаптивных колонках).
-->
Вам также может быть интересно: