Автоматический скролл-слайдер
Автоматически двигает горизонтальную ленту туда и обратно; наведение останавливает движение.
Что делает модификация
Автоматически двигает горизонтальную ленту туда и обратно; наведение останавливает движение.
Требования
Проверьте классы и ID на опубликованной странице. Не назначайте этим же элементам конфликтующую анимацию. Если меняете имя класса в кабинете, укажите такое же имя в Tilda.
Настройте под свой сайт
| Настройка | Назначение |
|---|---|
| ID Zero Block со слайдами | Выберите значение в интерфейсе личного кабинета. |
| ID блока стрелок | Выберите значение в интерфейсе личного кабинета. |
| Сдвиг до 480 px | Параметр 20–2000 |
| Сдвиг до 640 px | Параметр 20–2000 |
| Сдвиг до 960 px | Параметр 20–2000 |
| Сдвиг до 1200 px | Параметр 20–2000 |
| Сдвиг больше 1200 px | Параметр 20–2000 |
| Перемещение, ms | Параметр 100–3000 |
| Автоматический шаг, ms | Параметр 100–5000 |
Пошаговая установка
- Создайте лентуВ Zero Block расположите карточки горизонтально за пределами первого экрана. В настройках блока задайте Overflow → Auto; не включайте Auto Scale для этой ленты.
- Добавьте стрелкиВ отдельном Zero Block добавьте кнопки btn__left и btn__right. Укажите ID обоих блоков в кабинете.
- Настройте сдвигУкажите расстояние перемещения для каждого диапазона экранов. Слайдер не рассчитывает ширину карточки за вас.
- Установите кодВ личном кабинете задайте параметры и сгенерируйте код. Вставьте полный результат в T123 после подготовленных блоков. Сохраните и опубликуйте страницу.
- Проверьте управлениеПроверьте перетаскивание мышью, свайп на телефоне и обе стрелки.
- Проверьте автодвижениеНа концах направление меняется. Наведение и перетаскивание останавливают движение, уход курсора возобновляет его.
Проверьте классы и ID на опубликованной странице. Не назначайте этим же элементам конфликтующую анимацию. Если меняете имя класса в кабинете, укажите такое же имя в Tilda.
Частые вопросы
Где настроить модификацию?
После покупки откройте её в личном кабинете, задайте параметры и нажмите «Сгенерировать код».
Нужно ли править код вручную?
Параметры задаются в кабинете. Составные фрагменты вставьте в места, указанные в инструкции.
Пример использует мои блоки?
Пример показывает механику на демонстрационных элементах. На вашем сайте используются подготовленные элементы Tilda.