Задача: Адаптировать интерактивный слайдер под конструктор Тильды

Ссылка на референс

Для вдохновения используется архивная версия сайта известного производителя, где каждый слайд представляет собой список продуктов (только для примера). Исполнителю будет предоставлена прямая ссылка на сайт в рамках аудита.<

Основные требования

  • Слайдер должен быть полностью построен на Zero блок для гибкости дизайна (все визуальные элементы и тень выключены, кастомное наполнение через код).
  • Навигация осуществляется уникальными словами из списка (под текстом) - слова являются переключателями.
  • Слова и стили (цвет, размер, активное состояние) жёстко прописаны в JS/CSS коде, вне UI Тильды, для полного контроля верстки.
  • Сложное изменение: При добавлении/удалении слайда нужно: дописать ID нового Zero блока в JS (список), а также добавить новое слово в массив навигации.
  • Слова связываются с ID блоков индексом массива (первый элемент -> первый слайд).

Детали реализации структуры

  • Каждый слайд содержит заголовок, описание, картинку/фон.
  • Плавный переход (fadeIn).
  • Мобильная версия не требуется (если нет особых указаний). Важно: изучить референс внимательно - поведение исчезновения/появления достопримечательностей.

Конечный интерактив

При клике на слово, активный слайд скрывается, появившийся соответствующий слайд. На экране в любой момент показан ровно 1 слайд.