Слайдер на Тильде: свой вариант, когда штатный не подходит

Штатный слайдер в Тильде - это блоки из категории «Галереи»: там есть варианты с автопрокруткой, стрелками, точками-индикаторами и полосой миниатюр под изображениями. Для лендинга, портфолио или карточки товара с фотографиями этого хватает почти всегда. Но когда нужен слайдер сравнения «до и после», карточка с логикой, завязанной на корзину, или вертикальная прокрутка на весь экран, штатный блок упирается в потолок возможностей конструктора, и я собираю кастомный вариант на Zero Block.

Что умеет штатный слайдер в Тильде

В категории «Галереи» у Тильды несколько вариантов блоков: с точками, со стрелками, с полосой миниатюр, с текстом поверх изображения. Можно настроить скорость автопрокрутки, паузу при наведении, переход fade или slide, количество видимых слайдов на десктопе и отдельно на мобильной версии через встроенный адаптивный редактор. Внутри слайда доступны картинка или видео, заголовок, текст и кнопка со ссылкой, то есть стандартный набор элементов конструктора.

Для большинства задач этого достаточно: слайдер отзывов, слайдер услуг, галерея кейсов, обложки для блога. Такие блоки можно поставить на сайт без единой строчки кода, и это быстрее, чем городить кастом, а поддержка после сдачи проекта не нужна вовсе. Проблемы начинаются, когда внутри слайда нужна логика, а не просто картинка с текстом: расчёт цены, состояние корзины, сравнение двух изображений или синхронизация с другим блоком на странице.

Слайдер каталога с карточками товаров: где встроенный блок упирается в потолок

На одном из проектов, интернет-магазине мебели, нужен был слайдер готовых комплектов: диван плюс кресло плюс столик со скидкой за комплект. В каждом слайде должны были одновременно отображаться бейдж «выгода», старая и новая цена, и кнопка «добавить в корзину», которая при клике сразу обновляла счётчик корзины в шапке сайта без перезагрузки.

Штатный блок галереи такую карточку не потянет: слайд там - это картинка, заголовок, текст и одна кнопка со ссылкой на страницу или попап, без собственной логики внутри. Посчитать скидку на лету, обновить счётчик в другом блоке страницы или показать разное состояние кнопки после добавления товара он не умеет, потому что для этого нужен JavaScript, читающий и меняющий состояние страницы, а не просто вёрстка.

Решение в таких случаях - Zero Block с собственной разметкой слайдов и скриптом, который считает скидку на клиенте и дёргает те же обработчики, что и штатная корзина Тильды.

Слайдер сравнения «до и после» и другие нестандартные сценарии

Отдельный частый запрос от клиентов из ремонта, детейлинга и клиник - слайдер «до и после» с перетаскиваемым разделителем: два изображения наложены друг на друга, и посетитель сам двигает границу между ними мышью или пальцем. Такого блока в списке галерей Тильды нет, это отдельный виджет со своей механикой обработки касаний и позиционирования слоёв.

Второй пример - вертикальный слайдер на весь экран для лендинга-истории, где каждый слайд - это видео или крупная фотография во весь вьюпорт, а переход между ними происходит свайпом вверх-вниз, а не привычной горизонтальной прокруткой. Такой формат я собираю на Zero Block с CSS scroll-snap и JS, который ставит видео на паузу, когда слайд уходит из зоны видимости, чтобы не грузить страницу фоновой перемоткой роликов, которые никто не видит.

Синхронизация нескольких слайдеров и связка с другими блоками

Ещё один сценарий, который встроенный блок не закрывает: связка «слайдер плюс фильтр» или «слайдер плюс таб-меню», где переключение категории над слайдером должно менять набор видимых слайдов без перезагрузки страницы. У Тильды есть встроенные табы и меню-переключатели, но привязать их к конкретным слайдам внутри одной галереи так, чтобы фильтр показывал только нужную подборку, готового механизма нет.

Похожая история с двумя визуально разными слайдерами на одной странице, которые должны двигаться синхронно: например, крупный слайд с фото товара слева и узкая лента миниатюр с другой анимацией справа, где клик по миниатюре плавно перелистывает главный слайдер с собственной кривой анимации. Это уже связка двух независимых JS-компонентов с общим состоянием, а не настройка одного блока.

Как я собираю кастомный слайдер на Zero Block

Собираю кастомный слайдер в три шага. Сначала верстаю структуру слайдов внутри Zero Block: контейнер, обёртка и сами слайды с нужной начинкой, будь то картинка, карточка товара или блок сравнения. Дальше подключаю проверенную JS-библиотеку для слайдеров через код в настройках страницы: чаще всего это Swiper, у него открытый исходный код, активная поддержка и готовые модули под автопрокрутку, пагинацию, стрелки навигации и адаптивные точки перелома для разных ширин экрана.

Пример разметки слайдов:

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Слайд 1</div>
    <div class="swiper-slide">Слайд 2</div>
    <div class="swiper-slide">Слайд 3</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

И инициализация с точками перелома под мобильные экраны:

const slider = new Swiper('.swiper', {
  loop: true,
  autoplay: { delay: 4000, disableOnInteraction: false },
  pagination: { el: '.swiper-pagination', clickable: true },
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
  breakpoints: {
    320: { slidesPerView: 1, spaceBetween: 12 },
    980: { slidesPerView: 3, spaceBetween: 24 }
  }
});

Третий шаг - проверка на мобильной версии Тильды отдельно от десктопной, потому что у платформы собственный адаптивный редактор, и точки перелома в JS должны совпадать с реальными ширинами, на которых Тильда переключает вёрстку, иначе слайдер и native-адаптив начнут спорить друг с другом.

Сколько стоит кастомный слайдер и сроки

Если нужна разовая правка внутри штатного блока, например изменить скорость перехода, отключить автопрокрутку на мобильных или добавить CSS-полоску прогресса поверх точек-индикаторов, это укладывается в кастомный скрипт для Tilda и стоит от 3 000 ₽.

Слайдер, собранный с нуля на Zero Block с подключением библиотеки, синхронизацией с другими блоками или сравнением «до и после», я оцениваю по часовой ставке от 3 000 ₽/час, потому что объём работы сильно зависит от количества состояний и того, с чем слайдер должен взаимодействовать на странице. По моей практике на такой слайдер с синхронизацией и адаптивом уходит от 8 до 15 часов. Если слайдер - часть более крупной доработки, завязанной на CRM или оплату, это уже попадает в комплексную интеграцию для Tilda от 40 000 ₽.

Разовую задачу с конкретным слайдером обычно оформляю как кастомную доработку Тильды, с точным ТЗ, что должно двигаться, синхронизироваться и как вести себя на мобильных.

Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.

Частые вопросы

Замедлит ли кастомный слайдер загрузку сайта на Тильде?

Сама библиотека слайдера весит меньше одной оптимизированной фотографии на слайде, и я подключаю её без блокировки остальной страницы, а изображения внутри слайдов гружу с отложенной загрузкой. На скорость сильнее влияет вес самих картинок в слайдере, а не факт использования кастомного кода.

Можно ли использовать кастомный слайдер вместе с мобильной версией Тильды?

Да, у Тильды отдельный редактор мобильной версии, и в нём можно скрыть Zero Block с кастомным слайдером и показать вместо него штатную галерею, если под мобильный экран проще отдать управление конструктору, чем донастраивать точки перелома в коде.

Что будет со слайдером при обновлении дизайна сайта в Тильде?

Zero Block с кастомным кодом не связан с настройками штатных блоков, поэтому обновления интерфейса конструктора его не затрагивают. А вот если блок нужно скопировать на другую страницу или другой проект, код придётся переносить вручную вместе с разметкой.

Стоит ли переводить весь сайт на кастомные слайдеры вместо штатных?

Нет, штатный блок стоит оставлять там, где он справляется: отзывы, портфолио, обычная фотогалерея. Кастомный вариант имеет смысл только под конкретный сценарий, который блок из коробки не тянет, потому что за штатным блоком не нужно следить и переносить код при правках дизайна.