Вставьте код №1 ниже в блок "T123" в подвал вашего сайта. (Все блоки)
Поменяйте ID блока если используете код №2 ( для одного зеро-блока)
Добавьте 2 иконки с классами .arrow-l и .arrow-r, вставьте ID блоков в код №3
<!-- Убираем ползунок в горизонтальном скроле -->
<!-- https://youx.agency/ubiraem-polzunok-gorizontalnom-skrole-tilda -->
<style>
/* Стили для скрытия горизонтального скролла для всех блоков на сайте */
.t396__artboard {
overflow-x: auto;
scroll-behavior: smooth;
}
.t396__artboard::-webkit-scrollbar {
height: 0; /* Скрывает скроллбар */
}
</style>
<!-- Убираем ползунок в горизонтальном скроле -->
<!-- https://youx.agency/ubiraem-polzunok-gorizontalnom-skrole-tilda -->
<style>
/* Замените ID блока */
#rec636849002 .t396__artboard {
overflow-x: auto;
scroll-behavior: smooth;
}
/* Замените ID блока */
#rec636849002 .t396__artboard::-webkit-scrollbar {
height: 0; /* Скрывает скроллбар */
}
</style>
<style>
/* Стили для скрытия горизонтального скролла для блоков */
.t396__artboard {
overflow-x: auto;
scroll-behavior: smooth;
}
.t396__artboard::-webkit-scrollbar {
height: 0; /* Скрывает скроллбар */
}
</style>
<script>
// Функция для плавной прокрутки с регулировкой скорости
function smoothScroll(scrollTo, duration) {
const start = scrollContainer.scrollLeft;
const change = scrollTo - start;
const increment = 20;
let currentTime = 0;
function animateScroll() {
currentTime += increment;
const val = Math.easeInOutQuad(currentTime, start, change, duration);
scrollContainer.scrollLeft = val;
if (currentTime < duration) {
requestAnimationFrame(animateScroll);
}
}
animateScroll();
}
// Вставьте ID блока со скролом
document.addEventListener('DOMContentLoaded', function() {
const scrollContainer = document.querySelector('#rec592952504 .t396__artboard');
// Вставьте ID блока со стрелками
const arrowLeft = document.querySelector('#rec592951771 .arrow-l');
const arrowRight = document.querySelector('#rec592951771 .arrow-r');
// Прокрутка влево при клике на иконку "влево"
arrowLeft.addEventListener('click', function() {
scrollContainer.scrollLeft -= 300; // Прокрутка влево на 300 пикселей (настройте значение по своему усмотрению)
smoothScroll(targetScrollLeft, 1000); // 1000 миллисекунд - длительность анимации
});
// Прокрутка вправо при клике на иконку "вправо"
arrowRight.addEventListener('click', function() {
scrollContainer.scrollLeft += 300; // Прокрутка вправо на 300 пикселей (настройте значение по своему усмотрению)
smoothScroll(targetScrollLeft, 1000); // 1000 миллисекунд - длительность анимации
});
});
</script>