URL скопирован в буфер обмена!
Как сделать слайдер внутри Zero Block на Tilda?
С помощью этой модификации можно добавить в Zero Block слайдер карточек, где каждая карточка создаётся как отдельная object group. Поддерживаются разные режимы отображения, переключение стрелками и свайпы на мобильных устройствах.
Модификация работает с включенным Autoscale в блоках
Модификация работает только c Zero Block
Номер модификации в библиотеке TiCode
Класс карточки
Класс стрелки влево
Класс стрелки вправо
Рандомный поворот активной карточки
Рандмоный поворот карточек в стопке
Максимальный градус поворота
Количество видимых слайдов
Фиксация позиций карточек
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD143--><script>
(function ticodeStackSlider() {
let tiSliderInited = 0;
let tiArrowLeftClassName = 'tcd-left';
let tiArrowRightClassName = 'tcd-right';
let tiSlideClassPrefix = 'tcd-slide-';
let tiCardsVisibleCount = 3;
const tiStackStyle = {
offsetY: 12,
scaleStep: 0,
opacityStep: 0.12
};
const tiSwipe = {
startX: 0,
startY: 0,
lastX: 0,
lastY: 0,
tracking: 0,
horizontal: 0,
minDistance: 50,
lockAngleRatio: 1.15
};
function ticodeLoadGsap(tiCallback) {
if (window.gsap) {
tiCallback();
return;
}
const tiOldScript = document.querySelector('script[data-tildati-gsap="1"]');
if (tiOldScript) {
tiOldScript.addEventListener('load', tiCallback, { once: true });
return;
}
const tiScript = document.createElement('script');
tiScript.src = 'https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js';
tiScript.async = true;
tiScript.setAttribute('data-tildati-gsap', '1');
tiScript.onload = tiCallback;
document.head.appendChild(tiScript);
}
function ticodeClosestByClass(tiTarget, tiClassName) {
let tiElement = tiTarget;
while (tiElement && tiElement !== document) {
if (tiElement.classList && tiElement.classList.contains(tiClassName)) {
return tiElement;
}
tiElement = tiElement.parentElement;
}
return null;
}
function ticodeEscapeRegExp(tiText) {
return String(tiText).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
function ticodeGetSlideNumber(tiElement) {
let tiNumber = null;
tiElement.classList.forEach(function ticodeCheckSlideClass(tiClassName) {
const tiPattern = new RegExp('^' + ticodeEscapeRegExp(tiSlideClassPrefix) + '(\\d+)$');
const tiMatch = tiClassName.match(tiPattern);
if (tiMatch) {
tiNumber = parseInt(tiMatch[1], 10);
}
});
return tiNumber;
}
function ticodeFindSlides() {
const tiItems = Array.from(document.querySelectorAll('[class]'));
return tiItems
.map(function ticodeMapSlide(tiElement) {
return {
element: tiElement,
number: ticodeGetSlideNumber(tiElement)
};
})
.filter(function ticodeFilterSlide(tiItem) {
return tiItem.number !== null;
})
.sort(function ticodeSortSlides(tiA, tiB) {
return tiA.number - tiB.number;
})
.map(function ticodeReturnSlideElement(tiItem) {
return tiItem.element;
});
}
function ticodeApplyBaseStyles(tiSlides) {
tiSlides.forEach(function ticodeStyleSlide(tiSlide) {
tiSlide.style.willChange = 'transform, opacity';
tiSlide.style.transformOrigin = 'center center';
tiSlide.style.touchAction = 'pan-y';
});
[tiArrowLeftClassName, tiArrowRightClassName].forEach(function ticodeStyleArrowClass(tiClassName) {
const tiArrows = Array.from(document.getElementsByClassName(tiClassName));
tiArrows.forEach(function ticodeStyleArrow(tiArrow) {
tiArrow.style.cursor = 'pointer';
Array.from(tiArrow.querySelectorAll('*')).forEach(function ticodeStyleArrowChild(tiChild) {
tiChild.style.cursor = 'pointer';
});
});
});
}
function ticodeGetElementScale(tiElement) {
const tiRect = tiElement.getBoundingClientRect();
let tiScaleX = 1;
let tiScaleY = 1;
if (tiElement.offsetWidth && tiRect.width) {
tiScaleX = tiRect.width / tiElement.offsetWidth;
}
if (tiElement.offsetHeight && tiRect.height) {
tiScaleY = tiRect.height / tiElement.offsetHeight;
}
if (!isFinite(tiScaleX) || tiScaleX <= 0) {
tiScaleX = 1;
}
if (!isFinite(tiScaleY) || tiScaleY <= 0) {
tiScaleY = 1;
}
return {
x: tiScaleX,
y: tiScaleY
};
}
const tcRotationDegreesValue = 5;
function ticodeRandomRotation() {
if (!tcRotationDegreesValue) return 0;
return (Math.random() * tcRotationDegreesValue * 2) - tcRotationDegreesValue;
}
const tcdActiveRotationMode = 1;
function ticodeSetActiveRotation(tiSlide) {
tiSlide.tiActiveRotation = tcdActiveRotationMode === 1 ? ticodeRandomRotation() : 0;
}
const tildatiStackRotationMode = 1;
function ticodeInitStackSlotRotations(tiVisibleCards) {
const tiRotations = [];
for (let tiIndex = 0; tiIndex < tiVisibleCards; tiIndex++) {
if (tiIndex === 0) {
tiRotations[tiIndex] = 0;
continue;
}
tiRotations[tiIndex] = tildatiStackRotationMode === 1 ? ticodeRandomRotation() : 0;
}
return tiRotations;
}
const tiSlotDrawingMode = 1;
function ticodeInitStackSlider() {
if (tiSliderInited === 1) return true;
const tiSlides = ticodeFindSlides();
if (tiSlides.length < 2) return false;
tiSliderInited = 1;
ticodeApplyBaseStyles(tiSlides);
tiCardsVisibleCount = Math.min(Math.max(1, parseInt(tiCardsVisibleCount, 10)), tiSlides.length);
let tiOrder = tiSlides.slice();
let tiLocked = 0;
let tiResizeTimer = null;
const tiStackSlotRotations = ticodeInitStackSlotRotations(tiCardsVisibleCount);
function ticodeMeasureSavedSlots() {
window.gsap.set(tiSlides, {
x: 0,
y: 0,
rotation: 0,
scale: 1,
opacity: 1
});
const tiSlotRects = [];
for (let tiIndex = 0; tiIndex < tiCardsVisibleCount; tiIndex++) {
tiSlotRects[tiIndex] = tiSlides[tiIndex].getBoundingClientRect();
}
tiSlides.forEach(function ticodeSetSlideSlotOffsets(tiSlide) {
const tiSlideRect = tiSlide.getBoundingClientRect();
const tiSlideScale = ticodeGetElementScale(tiSlide);
tiSlide.tiSlotOffsets = tiSlotRects.map(function ticodeMapSlotOffset(tiSlotRect) {
return {
x: (tiSlotRect.left - tiSlideRect.left) / tiSlideScale.x,
y: (tiSlotRect.top - tiSlideRect.top) / tiSlideScale.y
};
});
});
}
function ticodeGetRotationForPosition(tiSlide, tiIndex) {
if (tiIndex === 0) {
return tiSlide.tiActiveRotation || 0;
}
const tiSlotIndex = Math.min(tiIndex, tiCardsVisibleCount - 1);
return tiStackSlotRotations[tiSlotIndex] || 0;
}
function ticodeGetSlotOffset(tiSlide, tiIndex) {
if (tiSlotDrawingMode !== 1) {
return {
x: 0,
y: 0
};
}
const tiSlotIndex = Math.min(tiIndex, tiCardsVisibleCount - 1);
if (!tiSlide.tiSlotOffsets || !tiSlide.tiSlotOffsets[tiSlotIndex]) {
return {
x: 0,
y: 0
};
}
return tiSlide.tiSlotOffsets[tiSlotIndex];
}
function ticodeGetStackStyle(tiSlide, tiIndex) {
const tiSlotOffset = ticodeGetSlotOffset(tiSlide, tiIndex);
if (tiIndex === 0) {
return {
x: tiSlotOffset.x,
y: tiSlotOffset.y,
rotation: ticodeGetRotationForPosition(tiSlide, tiIndex),
scale: 1,
opacity: 1
};
}
if (tiIndex >= tiCardsVisibleCount) {
return {
x: tiSlotOffset.x,
y: tiSlotOffset.y,
rotation: 0,
scale: 1,
opacity: 0
};
}
if (tiSlotDrawingMode === 1) {
return {
x: tiSlotOffset.x,
y: tiSlotOffset.y,
rotation: ticodeGetRotationForPosition(tiSlide, tiIndex),
scale: Math.max(0.82, 1 - tiIndex * tiStackStyle.scaleStep),
opacity: Math.max(0.35, 1 - tiIndex * tiStackStyle.opacityStep)
};
}
return {
x: 0,
y: tiIndex * tiStackStyle.offsetY,
rotation: ticodeGetRotationForPosition(tiSlide, tiIndex),
scale: Math.max(0.82, 1 - tiIndex * tiStackStyle.scaleStep),
opacity: Math.max(0.35, 1 - tiIndex * tiStackStyle.opacityStep)
};
}
function ticodeSetZindexAndEvents() {
tiOrder.forEach(function ticodeSetSlideZindex(tiSlide, tiIndex) {
tiSlide.style.zIndex = String(100 + tiOrder.length - tiIndex);
tiSlide.style.pointerEvents = tiIndex === 0 ? 'auto' : 'none';
});
}
function ticodeApplyStackLayout(tiAnimate) {
ticodeSetZindexAndEvents();
tiOrder.forEach(function ticodeApplySlideStyle(tiSlide, tiIndex) {
const tiStyle = ticodeGetStackStyle(tiSlide, tiIndex);
if (tiAnimate) {
window.gsap.to(tiSlide, {
duration: 0.3,
x: tiStyle.x,
y: tiStyle.y,
rotation: tiStyle.rotation,
scale: tiStyle.scale,
opacity: tiStyle.opacity,
ease: 'power2.out'
});
} else {
window.gsap.set(tiSlide, tiStyle);
}
});
}
function ticodeRefreshLayout(tiAnimate, tiUpdateActiveRotation) {
ticodeMeasureSavedSlots();
if (tiUpdateActiveRotation && tiOrder[0]) {
ticodeSetActiveRotation(tiOrder[0]);
}
ticodeApplyStackLayout(tiAnimate);
}
function ticodeRefreshLayoutAfterTildaScale() {
requestAnimationFrame(function ticodeFirstFrameRefresh() {
requestAnimationFrame(function ticodeSecondFrameRefresh() {
if (tiLocked === 1) return;
ticodeRefreshLayout(false, false);
});
});
}
function ticodeChangeSlide(tiDirection, tiMoveSign) {
if (tiLocked === 1) return;
tiLocked = 1;
const tiSign = typeof tiMoveSign === 'number'
? tiMoveSign
: (tiDirection === 'next' ? 1 : -1);
const tiCurrentSlide = tiOrder[0];
const tiIncomingSlide = tiDirection === 'next'
? tiOrder[1]
: tiOrder[tiOrder.length - 1];
const tiCurrentStyle = ticodeGetStackStyle(tiCurrentSlide, 0);
const tiIncomingStyle = ticodeGetStackStyle(tiIncomingSlide, 0);
window.gsap.killTweensOf(tiSlides);
window.gsap.set(tiCurrentSlide, {
zIndex: 1000,
pointerEvents: 'none'
});
window.gsap.set(tiIncomingSlide, {
zIndex: 999,
x: tiIncomingStyle.x + tiSign * -30,
y: tiIncomingStyle.y + 16,
rotation: tiIncomingStyle.rotation + tiSign * -2,
scale: 0.97,
opacity: 1
});
window.gsap.to(tiCurrentSlide, {
duration: 0.36,
x: tiCurrentStyle.x + tiSign * 170,
y: tiCurrentStyle.y - 24,
rotation: tiCurrentStyle.rotation + tiSign * 7,
scale: 0.94,
opacity: 0,
ease: 'power2.inOut',
onComplete: function ticodeAfterCurrentSlideLeave() {
if (tiDirection === 'next') {
tiOrder.push(tiOrder.shift());
} else {
tiOrder.unshift(tiOrder.pop());
}
const tiNewActiveSlide = tiOrder[0];
ticodeSetActiveRotation(tiNewActiveSlide);
ticodeSetZindexAndEvents();
const tiNewActiveStyle = ticodeGetStackStyle(tiNewActiveSlide, 0);
tiOrder.forEach(function ticodeAnimateStackSlide(tiSlide, tiIndex) {
if (tiSlide === tiNewActiveSlide) return;
const tiStyle = ticodeGetStackStyle(tiSlide, tiIndex);
window.gsap.to(tiSlide, {
duration: 0.3,
x: tiStyle.x,
y: tiStyle.y,
rotation: tiStyle.rotation,
scale: tiStyle.scale,
opacity: tiStyle.opacity,
ease: 'power2.out'
});
});
window.gsap.fromTo(tiNewActiveSlide, {
x: tiNewActiveStyle.x + tiSign * -30,
y: tiNewActiveStyle.y + 16,
rotation: tiNewActiveStyle.rotation + tiSign * -2,
scale: 0.97,
opacity: 1
}, {
duration: 0.42,
x: tiNewActiveStyle.x,
y: tiNewActiveStyle.y,
rotation: tiNewActiveStyle.rotation,
scale: 1,
opacity: 1,
ease: 'back.out(1.35)'
});
window.gsap.delayedCall(0.45, function ticodeUnlockSlider() {
tiLocked = 0;
ticodeRefreshLayoutAfterTildaScale();
});
}
});
}
function ticodeIsSwipeTarget(tiTarget) {
const tiActiveSlide = tiOrder[0];
if (!tiActiveSlide) return false;
return tiActiveSlide === tiTarget || tiActiveSlide.contains(tiTarget);
}
function ticodeGetTouch(tiEvent) {
if (tiEvent.touches && tiEvent.touches.length) {
return tiEvent.touches[0];
}
if (tiEvent.changedTouches && tiEvent.changedTouches.length) {
return tiEvent.changedTouches[0];
}
return null;
}
function ticodeResetSwipe() {
tiSwipe.startX = 0;
tiSwipe.startY = 0;
tiSwipe.lastX = 0;
tiSwipe.lastY = 0;
tiSwipe.tracking = 0;
tiSwipe.horizontal = 0;
}
function ticodeReturnActiveAfterSwipe() {
const tiActiveSlide = tiOrder[0];
if (!tiActiveSlide) return;
const tiActiveStyle = ticodeGetStackStyle(tiActiveSlide, 0);
window.gsap.to(tiActiveSlide, {
duration: 0.22,
x: tiActiveStyle.x,
y: tiActiveStyle.y,
rotation: tiActiveStyle.rotation,
scale: 1,
opacity: 1,
ease: 'power2.out'
});
}
document.addEventListener('touchstart', function ticodeHandleTouchStart(tiEvent) {
if (tiLocked === 1) return;
if (!ticodeIsSwipeTarget(tiEvent.target)) return;
const tiTouch = ticodeGetTouch(tiEvent);
if (!tiTouch) return;
tiSwipe.startX = tiTouch.clientX;
tiSwipe.startY = tiTouch.clientY;
tiSwipe.lastX = tiTouch.clientX;
tiSwipe.lastY = tiTouch.clientY;
tiSwipe.tracking = 1;
tiSwipe.horizontal = 0;
}, { passive: true });
document.addEventListener('touchmove', function ticodeHandleTouchMove(tiEvent) {
if (tiSwipe.tracking !== 1 || tiLocked === 1) return;
const tiTouch = ticodeGetTouch(tiEvent);
if (!tiTouch) return;
tiSwipe.lastX = tiTouch.clientX;
tiSwipe.lastY = tiTouch.clientY;
const tiDx = tiSwipe.lastX - tiSwipe.startX;
const tiDy = tiSwipe.lastY - tiSwipe.startY;
if (
Math.abs(tiDx) > 10 &&
Math.abs(tiDx) > Math.abs(tiDy) * tiSwipe.lockAngleRatio
) {
tiSwipe.horizontal = 1;
}
if (tiSwipe.horizontal !== 1) return;
tiEvent.preventDefault();
const tiActiveSlide = tiOrder[0];
if (!tiActiveSlide) return;
const tiActiveStyle = ticodeGetStackStyle(tiActiveSlide, 0);
const tiDragX = Math.max(-70, Math.min(70, tiDx * 0.28));
window.gsap.set(tiActiveSlide, {
x: tiActiveStyle.x + tiDragX,
y: tiActiveStyle.y,
rotation: tiActiveStyle.rotation + tiDragX * 0.04,
scale: 1
});
}, { passive: false });
document.addEventListener('touchend', function ticodeHandleTouchEnd() {
if (tiSwipe.tracking !== 1 || tiLocked === 1) {
ticodeResetSwipe();
return;
}
const tiDx = tiSwipe.lastX - tiSwipe.startX;
const tiDy = tiSwipe.lastY - tiSwipe.startY;
const tiIsRealSwipe =
Math.abs(tiDx) >= tiSwipe.minDistance &&
Math.abs(tiDx) > Math.abs(tiDy) * tiSwipe.lockAngleRatio;
if (tiIsRealSwipe) {
if (tiDx < 0) {
ticodeChangeSlide('next', -1);
} else {
ticodeChangeSlide('prev', 1);
}
} else {
ticodeReturnActiveAfterSwipe();
}
ticodeResetSwipe();
}, { passive: true });
document.addEventListener('touchcancel', function ticodeHandleTouchCancel() {
if (tiSwipe.tracking === 1) {
ticodeReturnActiveAfterSwipe();
}
ticodeResetSwipe();
}, { passive: true });
ticodeRefreshLayout(false, true);
setTimeout(ticodeRefreshLayoutAfterTildaScale, 120);
setTimeout(ticodeRefreshLayoutAfterTildaScale, 450);
setTimeout(ticodeRefreshLayoutAfterTildaScale, 900);
window.addEventListener('resize', function ticodeHandleResize() {
clearTimeout(tiResizeTimer);
tiResizeTimer = setTimeout(function ticodeDelayedResizeRefresh() {
ticodeRefreshLayoutAfterTildaScale();
}, 180);
});
window.addEventListener('orientationchange', function ticodeHandleOrientationChange() {
setTimeout(ticodeRefreshLayoutAfterTildaScale, 300);
setTimeout(ticodeRefreshLayoutAfterTildaScale, 800);
});
window.addEventListener('load', function ticodeHandleWindowLoad() {
ticodeRefreshLayoutAfterTildaScale();
});
document.addEventListener('click', function ticodeHandleClick(tiEvent) {
const tiRight = ticodeClosestByClass(tiEvent.target, tiArrowRightClassName);
const tiLeft = ticodeClosestByClass(tiEvent.target, tiArrowLeftClassName);
if (!tiRight && !tiLeft) return;
tiEvent.preventDefault();
if (tiRight) {
ticodeChangeSlide('next');
}
if (tiLeft) {
ticodeChangeSlide('prev');
}
});
return true;
}
function ticodeStart() {
ticodeLoadGsap(function ticodeAfterGsapLoad() {
if (ticodeInitStackSlider()) return;
let tiTryCount = 0;
const tiTimer = setInterval(function ticodeRetryInitSlider() {
tiTryCount++;
if (ticodeInitStackSlider() || tiTryCount > 40) {
clearInterval(tiTimer);
}
}, 250);
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', ticodeStart);
} else {
ticodeStart();
}
})();
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. В Zero Block добавляем элементы, которые должны отображаться в первом слайде. Объединяем их в группу, выбираем для группы тип Object и задаём группе класс tcd-slide-1
Важно! сначала объединяем элементы в группу, меняем тип группы на Object и только после этого добавляем класс
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Создаём остальные слайды. Для этого копируем первую группу нужное количество раз. Для каждой новой группы меняем номер в классе: tcd-slide-2, tcd-slide-3, tcd-slide-4 и т. д. После этого меняем контент внутри каждой группы.
3. Размещаем слайды друг под другом в виде стопки. Например, первый слайд сверху, второй ниже, третий ещё ниже в слоях. Эти позиции будут использоваться скриптом для отображения карточек в стопке.
4. Создаем стрелки для переключения слайдов. Можно использовать кнопку, шейп, изображение или текст. Для стрелки влево указываем класс tcd-left для стрелки вправо tcd-right
5. Указываем дополнителньые настройки в генераторе:
Рандомный поворот активной карточки - если включено, каждый активный слайд будет слегка наклоняться при показе.
Рандомный поворот карточек в стопке - если включено, карточки в стопке получат случайный поворот. Поворот задаётся один раз при загрузке страницы.
Максимальный градус поворота - указываем максимальный угол поворота для активной карточки и карточек в стопке, если включены рандомные повороты. Например, если указать 5, поворот будет случайным в диапазоне от -5° до 5°.
Количество видимых слайдов - указываем, сколько карточек видно в стопке.Например, если всего около 10 слайдов, можно показывать только 3 видимые карточки, а остальные будут скрыты до переключения.
Фиксация позиций карточек - если включено, скрипт запоминает позиции первых видимых карточек и подставляет остальные слайды в эти же места. Это удобно, если карточки расположены не строго стопкой, а, например, по горизонтали. Активная карточка будет становиться на позицию первой карточки, а следующие карточки на позиции остальных видимых карточек.
6. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком.
Важно! сначала объединяем элементы в группу, меняем тип группы на Object и только после этого добавляем класс
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Создаём остальные слайды. Для этого копируем первую группу нужное количество раз. Для каждой новой группы меняем номер в классе: tcd-slide-2, tcd-slide-3, tcd-slide-4 и т. д. После этого меняем контент внутри каждой группы.
3. Размещаем слайды друг под другом в виде стопки. Например, первый слайд сверху, второй ниже, третий ещё ниже в слоях. Эти позиции будут использоваться скриптом для отображения карточек в стопке.
4. Создаем стрелки для переключения слайдов. Можно использовать кнопку, шейп, изображение или текст. Для стрелки влево указываем класс tcd-left для стрелки вправо tcd-right
5. Указываем дополнителньые настройки в генераторе:
Рандомный поворот активной карточки - если включено, каждый активный слайд будет слегка наклоняться при показе.
Рандомный поворот карточек в стопке - если включено, карточки в стопке получат случайный поворот. Поворот задаётся один раз при загрузке страницы.
Максимальный градус поворота - указываем максимальный угол поворота для активной карточки и карточек в стопке, если включены рандомные повороты. Например, если указать 5, поворот будет случайным в диапазоне от -5° до 5°.
Количество видимых слайдов - указываем, сколько карточек видно в стопке.Например, если всего около 10 слайдов, можно показывать только 3 видимые карточки, а остальные будут скрыты до переключения.
Фиксация позиций карточек - если включено, скрипт запоминает позиции первых видимых карточек и подставляет остальные слайды в эти же места. Это удобно, если карточки расположены не строго стопкой, а, например, по горизонтали. Активная карточка будет становиться на позицию первой карточки, а следующие карточки на позиции остальных видимых карточек.
6. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком.
