From 9ddfcac4cbc265e3953823ae227365103c8380fa Mon Sep 17 00:00:00 2001
From: Dobro_eee <102594602+dobroeee@users.noreply.github.com>
Date: Mon, 2 Feb 2026 02:19:35 +0500
Subject: [PATCH] Add Tilda slider block 123 template

---
 tilda-slider-123.html | 346 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 346 insertions(+)
 create mode 100644 tilda-slider-123.html

diff --git a/tilda-slider-123.html b/tilda-slider-123.html
new file mode 100644
index 0000000..eb912b8
--- /dev/null
+++ b/tilda-slider-123.html
@@ -0,0 +1,346 @@
+<!-- Tilda Zero Block / HTML Block #123: Custom dark slider pulling cards from #rec1861153111 -->
+<div class="tilda-slider" id="tilda-slider-123" data-source-rec="#rec1861153111">
+  <div class="tilda-slider__viewport">
+    <div class="tilda-slider__track"></div>
+  </div>
+  <button class="tilda-slider__nav tilda-slider__nav--prev" type="button" aria-label="Previous">‹</button>
+  <button class="tilda-slider__nav tilda-slider__nav--next" type="button" aria-label="Next">›</button>
+  <div class="tilda-slider__dots" role="tablist" aria-label="Slider dots"></div>
+</div>
+
+<style>
+  :root {
+    --slider-bg: #0f1115;
+    --slider-card-bg: #171a21;
+    --slider-text: #f6f6f6;
+    --slider-muted: #a7adba;
+    --slider-accent: #5ce1e6;
+    --slider-gap: 24px;
+    --slider-radius: 20px;
+    --slider-edge-padding: 40px;
+  }
+
+  #tilda-slider-123 {
+    position: relative;
+    background: var(--slider-bg);
+    color: var(--slider-text);
+    padding: 40px var(--slider-edge-padding) 60px;
+    overflow: hidden;
+  }
+
+  #tilda-slider-123 .tilda-slider__viewport {
+    overflow: hidden;
+  }
+
+  #tilda-slider-123 .tilda-slider__track {
+    display: flex;
+    gap: var(--slider-gap);
+    transition: transform 0.6s ease;
+    will-change: transform;
+  }
+
+  #tilda-slider-123 .tilda-slider__card {
+    flex: 0 0 min(420px, 85vw);
+    background: var(--slider-card-bg);
+    border-radius: var(--slider-radius);
+    padding: 24px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+    display: grid;
+    grid-template-rows: auto auto 1fr auto;
+    gap: 16px;
+  }
+
+  #tilda-slider-123 .tilda-slider__card-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  #tilda-slider-123 .tilda-slider__card-image {
+    width: 80px;
+    height: 80px;
+    border-radius: 16px;
+    object-fit: cover;
+    background: #232833;
+    flex-shrink: 0;
+  }
+
+  #tilda-slider-123 .tilda-slider__card-title {
+    font-size: 20px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  #tilda-slider-123 .tilda-slider__card-description {
+    color: var(--slider-muted);
+    font-size: 14px;
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  #tilda-slider-123 .tilda-slider__disciplines {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px 16px;
+  }
+
+  #tilda-slider-123 .tilda-slider__discipline {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    border-radius: 12px;
+    background: #1e2330;
+    color: var(--slider-muted);
+    font-size: 13px;
+    transition: all 0.3s ease;
+  }
+
+  #tilda-slider-123 .tilda-slider__discipline--active {
+    background: rgba(92, 225, 230, 0.12);
+    color: var(--slider-accent);
+    box-shadow: inset 0 0 0 1px rgba(92, 225, 230, 0.25);
+  }
+
+  #tilda-slider-123 .tilda-slider__discipline-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0.8;
+  }
+
+  #tilda-slider-123 .tilda-slider__nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(23, 26, 33, 0.9);
+    color: #fff;
+    font-size: 24px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s ease;
+  }
+
+  #tilda-slider-123 .tilda-slider__nav:hover {
+    background: rgba(92, 225, 230, 0.4);
+  }
+
+  #tilda-slider-123 .tilda-slider__nav--prev {
+    left: 12px;
+  }
+
+  #tilda-slider-123 .tilda-slider__nav--next {
+    right: 12px;
+  }
+
+  #tilda-slider-123 .tilda-slider__dots {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 20px;
+  }
+
+  #tilda-slider-123 .tilda-slider__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #394050;
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  #tilda-slider-123 .tilda-slider__dot[aria-selected="true"] {
+    width: 24px;
+    border-radius: 999px;
+    background: var(--slider-accent);
+  }
+
+  @media (max-width: 980px) {
+    #tilda-slider-123 {
+      padding: 32px 24px 50px;
+    }
+
+    #tilda-slider-123 .tilda-slider__card {
+      flex-basis: 80vw;
+    }
+  }
+</style>
+
+<script>
+  (function () {
+    const sliderRoot = document.querySelector('#tilda-slider-123');
+    if (!sliderRoot) return;
+
+    const sourceRecSelector = sliderRoot.dataset.sourceRec || '#rec1861153111';
+    const sourceRec = document.querySelector(sourceRecSelector);
+    const track = sliderRoot.querySelector('.tilda-slider__track');
+    const dotsContainer = sliderRoot.querySelector('.tilda-slider__dots');
+    const prevBtn = sliderRoot.querySelector('.tilda-slider__nav--prev');
+    const nextBtn = sliderRoot.querySelector('.tilda-slider__nav--next');
+
+    const disciplineLabels = [
+      'Зал 1',
+      'Зал 2',
+      'Зал 3',
+      'Зал 4'
+    ];
+
+    const parseBullets = (text) => {
+      if (!text) return [];
+      return text
+        .split(/\n|\r|•|·|\*|-/)
+        .map((item) => item.trim())
+        .filter(Boolean);
+    };
+
+    const normalize = (value) => value.toLowerCase();
+
+    const buildCard = (data) => {
+      const bullets = parseBullets(data.subtitle || '');
+      const bulletSet = new Set(bullets.map(normalize));
+
+      const card = document.createElement('div');
+      card.className = 'tilda-slider__card';
+      card.innerHTML = `
+        <div class="tilda-slider__card-header">
+          <img class="tilda-slider__card-image" src="${data.image}" alt="${data.title}">
+          <h3 class="tilda-slider__card-title">${data.title}</h3>
+        </div>
+        <p class="tilda-slider__card-description">${data.description}</p>
+        <div class="tilda-slider__disciplines">
+          ${disciplineLabels
+            .map((label) => {
+              const active = bulletSet.has(normalize(label));
+              return `
+                <div class="tilda-slider__discipline ${active ? 'tilda-slider__discipline--active' : ''}">
+                  <span class="tilda-slider__discipline-dot"></span>
+                  <span>${label}</span>
+                </div>
+              `;
+            })
+            .join('')}
+        </div>
+      `;
+      return card;
+    };
+
+    const extractCardsFromTilda = () => {
+      if (!sourceRec) return [];
+
+      const cards = [];
+      const collectionItems = sourceRec.querySelectorAll('.t-col');
+
+      collectionItems.forEach((item) => {
+        const title = item.querySelector('[data-elem-type="text"], .t-card__title, .t-name')?.textContent?.trim();
+        const description = item.querySelector('.t-text, .t-descr, .t-card__descr')?.textContent?.trim();
+        const subtitle = item.querySelector('.t-uptitle, .t-card__subtitle, .t-subtitle')?.textContent?.trim();
+        const image = item.querySelector('img')?.getAttribute('src');
+
+        if (!title || !description || !image) return;
+
+        cards.push({
+          title,
+          description,
+          subtitle,
+          image
+        });
+      });
+
+      return cards;
+    };
+
+    const buildSlider = (cardsData) => {
+      track.innerHTML = '';
+      dotsContainer.innerHTML = '';
+
+      cardsData.forEach((cardData, index) => {
+        track.appendChild(buildCard(cardData));
+
+        const dot = document.createElement('button');
+        dot.className = 'tilda-slider__dot';
+        dot.type = 'button';
+        dot.setAttribute('role', 'tab');
+        dot.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
+        dot.addEventListener('click', () => goToSlide(index));
+        dotsContainer.appendChild(dot);
+      });
+
+      updateControls();
+    };
+
+    let currentIndex = 0;
+    let autoplayTimer;
+
+    const getCardWidth = () => {
+      const firstCard = track.querySelector('.tilda-slider__card');
+      if (!firstCard) return 0;
+      const style = window.getComputedStyle(track);
+      const gap = parseFloat(style.columnGap || style.gap || 0);
+      return firstCard.getBoundingClientRect().width + gap;
+    };
+
+    const updateControls = () => {
+      const dots = dotsContainer.querySelectorAll('.tilda-slider__dot');
+      dots.forEach((dot, index) => {
+        dot.setAttribute('aria-selected', index === currentIndex ? 'true' : 'false');
+      });
+    };
+
+    const goToSlide = (index) => {
+      const cardWidth = getCardWidth();
+      currentIndex = Math.max(0, Math.min(index, track.children.length - 1));
+      track.style.transform = `translateX(${-currentIndex * cardWidth}px)`;
+      updateControls();
+    };
+
+    const nextSlide = () => {
+      const nextIndex = (currentIndex + 1) % track.children.length;
+      goToSlide(nextIndex);
+    };
+
+    const prevSlide = () => {
+      const prevIndex = currentIndex === 0 ? track.children.length - 1 : currentIndex - 1;
+      goToSlide(prevIndex);
+    };
+
+    const startAutoplay = () => {
+      stopAutoplay();
+      autoplayTimer = window.setInterval(nextSlide, 5000);
+    };
+
+    const stopAutoplay = () => {
+      if (autoplayTimer) {
+        window.clearInterval(autoplayTimer);
+        autoplayTimer = null;
+      }
+    };
+
+    prevBtn.addEventListener('click', () => {
+      prevSlide();
+      startAutoplay();
+    });
+
+    nextBtn.addEventListener('click', () => {
+      nextSlide();
+      startAutoplay();
+    });
+
+    sliderRoot.addEventListener('mouseenter', stopAutoplay);
+    sliderRoot.addEventListener('mouseleave', startAutoplay);
+
+    const cardsData = extractCardsFromTilda();
+    if (cardsData.length) {
+      buildSlider(cardsData);
+      startAutoplay();
+      window.addEventListener('resize', () => goToSlide(currentIndex));
+    }
+  })();
+</script>