Кольцевая галерея карточек

<!--TS48 - Модификация для Тильды. Бесконечная галерея https://mod.tistols.com/endless-gallery-->
<div
  class="endless-gallery"
  data-images='[
  {"url": "https://static.tildacdn.com/tild6231-6534-4665-a635-353039656538/pexels-cottonbro-730.jpg", "width": 900, "height": 600, "title": "CASE 001", "buttonText": "View project", "buttonUrl": "https://mod.tistols.com/example/endless-gallery/4"},
  {"url": "https://static.tildacdn.com/tild6263-6430-4532-a430-613031643132/Rectangle_1.jpg", "width": 900, "height": 600, "title": "CASE 002", "buttonText": "View project", "buttonUrl": "https://mod.tistols.com/example/endless-gallery/1"},
  {"url": "https://static.tildacdn.com/tild3832-3634-4031-a231-613338326265/Rectangle_4.jpg", "width": 900, "height": 600, "title": "CASE 002", "buttonText": "View project", "buttonUrl": "https://mod.tistols.com/example/endless-gallery/3"},
  {"url": "https://static.tildacdn.com/tild3830-3066-4362-a265-623431333037/Rectangle_3.jpg", "width": 900, "height": 600, "title": "CASE 002", "buttonText": "View project", "buttonUrl": "https://mod.tistols.com/example/endless-gallery/2"}
]'
  data-density="1"
  data-image-size="14"
  data-cell-size="110"
  data-view-range="2"
  data-fog-near="120"
  data-fog-far="320"
  data-drag-speed="1"
  data-drift-amount="8"
  data-friction="0.9"
  data-auto-zoom="true"
  data-auto-zoom-speed="0.5"
  data-image-radius="0.00"
  data-scroll-zoom="true" 
  data-allow-image-focus-on-click="true"
  data-background-color="#000000"
  data-fog-color="#000000"
></div>

<!-- images: Массив для галереи изображений/видео с текстом и кнопками, содержащий URL-адрес и внутренние размеры (data-images='[{"url": "https://example.com/1.jpg", "width": 800, "height": 600, "title": "Название товара", "buttonText": "Смотреть", "buttonUrl": "https://example.com/product"}] - через запятую перечислять объекты {}') -->
<!-- density: Плотность изображений в одной ячейке сетки. (От 1 до 15 — чем больше значение, тем больше картинок отображается в каждой ячейке) -->
<!-- image-ratio: Соотношение сторон изображений. ("3:4" — портрет, "4:3" — альбом, "1:1" — квадрат; если не задан — используются оригинальные размеры) data-image-ratio="4:3" -->
<!-- image-size: Базовый размер каждого изображения в 3D-пространстве. (От 4 до 40 — влияет на визуальный масштаб карточек) -->
<!-- cell-size: Размер одной ячейки сетки в мировых единицах. (От 30 до 300 — чем больше значение, тем дальше друг от друга располагаются группы изображений) -->
<!-- view-range: Дальность рендера вокруг камеры в ячейках. (От 1 до 4 — увеличивает или уменьшает область видимости галереи) -->
<!-- fog-near: Начальная дистанция появления тумана. (От 10 до 500 — определяет, с какого расстояния сцена начинает затухать в туман) -->
<!-- fog-far: Конечная дистанция тумана. (От 50 до 800 — на этом расстоянии объекты полностью скрываются в тумане) -->
<!-- drag-speed: Чувствительность перетаскивания и скролла. (От 0.1 до 5 — влияет на скорость перемещения по галерее) -->
<!-- drift-amount: Сила параллакс-смещения от движения мыши. (От 0 до 20 — добавляет «плавание» изображений при движении курсора) -->
<!-- friction: Коэффициент затухания скорости движения. (От 0 до 1 — 0 = мгновенная остановка, 1 = движение почти не замедляется) -->
<!-- auto-zoom: Автоматическое приближение камеры. (true/false — включает постоянное движение вперёд без участия пользователя) -->
<!-- auto-zoom-speed: Скорость автоматического зума. (От 0.1 до 3 — регулирует скорость движения вперёд) -->
<!-- image-radius: Скругление углов изображений. (От 0 до 1 — доля от короткой стороны изображения) -->
<!-- scroll-zoom: Зум колесиком мыши. (true — включён по умолчанию, false — отключён) -->
<!-- allow-image-focus-on-click: Возможность фокусировки на изображении по клику. (true/false — включает эффект приближения к выбранной картинке) -->
<!-- background-color: Цвет фона сцены. (HEX-цвет — задаёт общий фон галереи) -->
<!-- fog-color: Цвет тумана. (HEX-цвет — обычно совпадает с фоном для плавного исчезновения объектов) -->

<!--TS48 - Модификация для Тильды. Бесконечная галерея https://mod.tistols.com/endless-gallery-->
<script type="module" crossorigin src="https://tilda.tistols.com/mods/endless-gallery/endless-gallery-fspb2f09ky.js"></script>
<link rel="stylesheet" href="https://tilda.tistols.com/mods/endless-gallery/endless-gallery-fspb2f09ky.css">