В этом видео я покажу как сделать практически любой слайдер из зеро-блок/стандартных блоков, без редактирования кода, со своими со своими стрелками, Autoscale, точками пагинации и синхронизацией между слайдами на Тильда, и разберу все возможные настройки для кастомизации такого слайдера.
Это видео как инструкция по сборке - можешь сразу перепрыгивать по таймкодам на нужные тебе участки видео или же смотреть это видео полностью, параллельно собирая нужный тебе тип слайдера
0:00 Описание
0:28 Как сделать быстрый и простой слайдер (на всю ширину экрана)
3:13 Если нужно показывать больше чем один слайд к показу
5:40 Задаем размеры html-элемента для слайдера с больше чем одним к показу
6:30 Делаем стрелки для переключения слайдов
7:00 Генерируем код
10:43 Добавляем точки навигации
11:30 Если нужно прокручивать сразу несколько слайдов за шаг
12:15 Как задать отступ между слайдами
14:50 Скорость перелистывания слайдов
15:24 Автоматическая смена слайдов по времени
16:14 Сделать свои точки навигации вместо стандартных
19:03 Прозрачные боковые слайды
20:45 Синхронизируем два слайда между собой
24:20 Уменьшение боковых слайдов
27:08 Fade-эффект смены слайдов
28:08 Вертикальный слайдер
28:22 Режим повышенной совместимости
28:30 Свайп сразу на несколько слайдов
29:15 Счётчик слайдов
31:15 Генерируем
31:30 Переключение свайпом
31:43 Останавливать все видео в слайдах при перелистывании
32:32 Изменение высоты по высоте слайда
33:15 Адаптив слайдера
35:40 Делаем чтобы боковые слайды выходили за границы экрана на телефоне
36:21 Первый способ сделать боковые слайды на тлф
38:00 Чувствительность при свайпе
39:45 Разное количество слайдов к показу на разных разрешениях
42:33 Какие настройки задать html-элементу (и также про работу с autoscale)
44:42 Если слайды не показываются или смещены вбок
46:55 Полная версия расширения и новые и инструменты для Tilda
ВНИМАНИЕ!
Я достаточно часто добавляю новые фичи на основе голосования\фидбека который получаю и поэтому некоторые шаги для создания модификации могут меняться с течением времени. Поэтому обязательно сверься с инструкцией на страничке если что-то не работает. И не забудь также обратить внимание на пункт "важно" в инструкции, там информация по исключениям для некоторых настроек
Ссылка на расширение из видео:
voron-dev.ru/install-guide
Ссылка на генератор на сайте:
voron-dev.ru/zeroslide
Тг-канал с модификациями:
t.me/voron_strikes_back
2 июн 2024
