Loading...
Запас чистеньких  носков токенов
Удвоить токены
Акция
23 февраля — 2 марта
Скачать расширение
Техподдержка
Модификации
AI-ассистент
Видео-библиотека
Профиль
Подписка
Партнерка
Новости
Шаблоны
Запас чистеньких  носков токенов
Удвоить токены
Акция
23 февраля — 2 марта
....
NLM146 • Время настройки: 5 минут

Как сделать слайдер для товаров на Тильде?

Модификация поможет настроить анимацию автоматической смены слайдов с товарами, свои стрелки, свои точки или можно настроить стандартные элементы управления.
Она работает в связке с другими нашими решениями, чтобы вы могли пройти весь путь от макета до запуска сайта, не привлекая разработчиков.
Эта модификация — часть системы инструментов для работы с Тильдой
Перенесите макет в Тильду за 10 минут

Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Плагин для Figma
AI-ассистент
Генератор CSS-стилей
Модификации
Расширение для Тильды
Работайте с модификациями внутри привычного редактора Тильды

Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Ваш персональный AI-ассистент для Тильды

Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Стандартные блоки Tilda не вписываются в дизайн?

Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Добавьте уникальные функции в один клик

База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.

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

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

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

Инструкция
Для настройки данной модификации необходимо разместить на странице блоки с товарами (модификация работает только с блоками ST300, ST305N, ST310N, ST315N). Далее заполнить следующие поля в генераторе:

1. «Укажите id блоков с товарами из каталога»— копируешь id блока в котором настроены товары из каталога;
2. «Автоматическая смена слайдов (в миллисекундах)» — задаешь время, через которое слайды будут перелистываться (в миллисекундах);
3. «Скорость анимации (в миллисекунах)» — задаешь скорость анимации, то есть самого перелистывания слайдов;
4. «Не автопролистывать, если на слайдер наведена мышка» — включи данную функцию, если хочешь чтобы слайдер прекращал автопролистывание;
5. «Отключить автопролистывание на мобилках» — включи, если хочешь чтобы автопролистывание не работало на мобилках;
6. «Включить свайп мышкой на ПК версии»;
7. «Отключить свайп на мобилке»;
8. «Бесконечный слайдер» — функция позволяет пролистыванию не останавливаться. Например, например, у вас 3 блока, когда будете нажимать стрелку вперед, слайдер будет переключаться с 3го на 1ый;
9. «Тип управляющих элементов» — из предложенного списка выбери подходящие элементы управления, или скрой все;

10. Настройка стрелки:
  • Настройки стрелки — выбери какую стрелку хочешь установить, стандартную или загрузить свою;
  • Ссылка на свою стрелку (влево) — данное поле отображается в случае если в предыдущем поле выбираешь вариант «загрузить свою»;
  • Ссылка на свою стрелку (вправо);
  • Положение стрелок: ←→ Лево право (Растянутые), ↖ Лево Верх (Стрелки рядом), ↗ Право Верх (Стрелки рядом), ↘ Право Низ (Стрелки рядом), ↙ Лево Низ (Стрелки рядом), ↑ Верх (Стрелки рядом), ↓ Низ (Стрелки рядом);
  • Положение стрелок на мобилке: ←→ Лево право (Растянутые), ↖ Лево Верх (Стрелки рядом), ↗ Право Верх (Стрелки рядом), ↘ Право Низ (Стрелки рядом), ↙ Лево Низ (Стрелки рядом), ↑ Верх (Стрелки рядом), ↓ Низ (Стрелки рядом);
  • Размер стрелки (px);
  • Размер стрелки на мобилке (px);
  • Размер кнопки (px);
  • Размер кнопки на мобилке (px);
  • Отступ между собой (px);
  • Отступ снизу/сверху (px);
  • Отступ слева/справа (px) — положительное значение данного параметра задает отступ для стрелок внутри слайдера, от его края. Отрицательное значение регулирует то, насколько стрелки отодвинуты от слайдера к краям окна браузера.
  • Непрозрачность фона (%);
  • Непрозрачность фона при наведении (%);
  • При наведении увеличение;
  • Цвет фона;
  • Цвет фона при наведении;
11. «Скрыть на мобилке» — функция позволяет скрыть полностью элементы управления на мобилке;

12. Настройки точек:
  • Настройки точек — выбери стандартные точки и загрузи свои;
  • Ссылка на свою активную точку — данное поле отображается в случае если в предыдущем поле выбираешь вариант «загрузить свою»;
  • Ссылка на свою неактивную точку;
  • Размер активной точки (px);
  • Размер неактивной точки (px);
  • Радиус закругления точки (%);
  • Цвет фона;
  • Цвет фона активной точки;
  • Толщина обводки (px);
  • Цвет обводки;
  • Цвет обводки активной точки;
  • Непрозрачность активной точки (%);
  • Непрозрачность неактивной точки (%);
  • Черно-белый фильтр активной точки;
  • Черно-белый фильтр неактивной точки;
  • Положение точек: ↖ Лево Верх, ↗ Право Верх, ↘ Право Низ, ↙ Лево Низ, ↑ Верх, ↓ Низ;
  • Положение точек на мобилке: ↖ Лево Верх, ↗ Право Верх, ↘ Право Низ, ↙ Лево Низ, ↑ Верх, ↓ Низ;
  • Отступ между собой (px)
  • Отступ снизу/сверху (px)
  • Отступ слева/справа (px)
  • Отступ снизу (px)<640px
  • Отступ сверху (px)<640px
  • Отступ слева/справа (px)<640px

13. «Скрыть на мобилке» — функция позволяет скрыть полностью элементы управления на мобилке;

Имей в виду:

  • Модификация работает только с блоками ST300, ST305N, ST310N, ST315N
  • Товары должны быть добавлены через каталог.
  • Модификация не работает в связке бесконечный слайдер + блок ST600.
  • Модификация не работает в связке с модификацией NLM151.

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

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

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

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

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

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