Top.Mail.Ru
Loading...
Мы в соцсетях
Ответим на вопросы
Техподдержка
No-code платформа для интеграции с российскими сервисами
Адаптер
Образовательные курсы и гайды для IT-специалистов
Академия
Партнерам
Клиентам
О нас
Плагин для Тильды
Скачать расширение
Техподдержка
Модификации
AI-ассистент
Обучение
Профиль
Подписка
Партнерка
Новости
Шаблоны
Ai-ассистент для Тильды
....
NLM199 • Время настройки: 2 минуты

Как добавить слайдер фото при наведении на карточку товара на Тильде?

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

Посмотрите, как будет выглядеть модификация на вашем сайте.

Дизайн настраиваете сами — наша модификация добавит нужный эффект.

Смотрите, как быстро установить модификацию

Инструкция
Шаг 1.
Добавляешь на страницу блок с товарами из каталога.

Внимание!
  • Модификация работает только с блоками ST300, ST315N, ST320N.
  • В настройках блока с товарами выключите настройку «Показывать второе изображение при наведении»

Шаг 2.
Заполните поля в генераторе.

1. Введите id блока
Это уникальный идентификатор блока с товарами, к которому будет применяться данная модификация. Он позволяет скрипту найти нужный блок на странице для добавления функционала слайдера.

2. Цвет активной линии
Это цвет линии, которая будет отображаться под активным изображением товара. Обычно используется для указания текущего выбранного изображения в слайдере.

3. Цвет неактивной линии
Это цвет линий, которые представляют неактивные изображения. Они показывают, какие изображения есть в галерее, но в данный момент не выбраны.

4. Высота линий (px)
Эта настройка определяет высоту линий под изображениями. Высота может быть изменена для улучшения читаемости или визуальных эффектов.

5. Непрозрачность линий
Этот параметр управляет уровнем прозрачности линий под изображениями. Можно сделать их менее заметными или более выраженными, в зависимости от общего дизайна сайта.

6. Цвет подсказки 'Еще # фото'
Это цвет текста для подсказки «Еще X фото», которая отображается, когда у товара есть больше трех изображений. Этот параметр помогает наладить визуальную гармонию между элементами интерфейса.

Шаг 3.
Когда всё готово — копируешь HTML-код и вставляешь его в блок Т123.

Важно:

  • Модификация работает с товарами, подключенными через каталог.
  • Модификация работает на экранах от 640рх.

Сгенерируйте код для своего сайта

Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 4
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 4 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 3
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 2
Создать аккаунт — это быстро и просто.
Войдите или зарегистрируйтесь на платформе
Шаг 1
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Копировать код
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1

Популярные решения для вашего сайта

Не нашли нужное решение?

Часто задаваемые вопросы

Наши видеоинструкции позволяют внедрять модификации за 2−5 минут даже без технических знаний. Всё делается прямо в редакторе Тильды, без ручного редактирования кода
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Есть идеи по улучшению этой модификации или созданию новой?
Поделись своим предложением или проголосуй за понравившуюся идею. Наиболее популярные будем реализовывать.
Не забудь подписаться, чтобы быть в курсе последних обновлений.