Skip to content

Add dark Tilda slider template for block 123 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dobroeee wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add dark Tilda slider template for block 123 #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
346 changes: 346 additions & 0 deletions tilda-slider-123.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `
Comment on lines +206 to +222
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Match hall labels by substring, not exact bullet equality

The discipline highlight only turns on when a subtitle bullet exactly equals the hall label after lowercasing (bulletSet.has(normalize(label))). If a bullet includes any extra text like "Зал 1 — йога" or "Зал 1 (утро)", the hall name is present but the exact match fails, so the pill stays inactive. This breaks the stated behavior in cases where subtitles add clarifying text to each bullet; consider checking includes on the normalized bullet text or stripping punctuation/extra text before comparison.

Useful? React with 👍 / 👎.

<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>