Любой слайдер из Zeroblock на Tilda! Полный разбор всех нужных тебе настроек под любые запросы
Рет қаралды 12,335
Күн бұрынВ этом видео я покажу как сделать практически любой слайдер из зеро-блок/стандартных блоков, без редактирования кода, со своими со своими стрелками, 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
@user-vz9st4ce6o 5 ай бұрын
Огромное спасибо . Долго искала нужный мне слайдер. У вас нашла то, что было нужно!!!!!!
@katedovgalo7803 4 ай бұрын
Добрый день! Супер получились все варианты слайдов.
@gimelreih 5 ай бұрын
Подписалась на канал, спасибо вам за отличный сервис и высокое качество кода! Поддержка на высшем уровне.
@cargo-service 5 ай бұрын
Дай бог здоровья и счастья! Сколько мучений было, а решилось всё просто! Процветание вашему делу!
@Iri-ecco 5 ай бұрын
Супер! Опробовала: все работает отлично. Подписалась: буду тестировать дальше все остальное! Спасибо! Это очень классно!
@ktkt4451 2 ай бұрын
Спасибо большое за твою работу. Лучшее, что я видела!
@zero-kot 3 ай бұрын
Просто ЛУЧШИЙ генератор слайдеров под любые задачи! Спасибо! Всех благ и успехов!
@user-xl5om9vb1j 5 ай бұрын
Спасибо!! Как всегда все ясно, понятно и естественно КРУТО!! С новым годом!!!
@voron-dev 5 ай бұрын
Спасибо, и тебя тоже с Новым годом:D
@Matroskin543 2 ай бұрын
Спасибо вам большое! Очень полезная вещь! 👍
@nihilistmaestro8058 2 ай бұрын
Мужчина я кайфую с того что ты делаешь. Красава!!!
@serjsteinbach 4 ай бұрын
Супер спасибо за труд! Снимаю шляпу)
@user-gm9th7ge9s 3 ай бұрын
Храни господь автора, 5ый час пыталась сделать эту галерею (не занимаюсь сайтами, но очень срочно понадобилась эта штука) И вот нашла это видео и все получилось мега быстро и просто, единственный разбор, который сработал!
@maxo6809 3 ай бұрын
Огромное спасибо за видео
@masterchief9905 2 ай бұрын
Пользуюсь. Отличный слайдер. Еще SBS-анимацию к бесконечному слайдеру прикрутить - будет вообще огонь. Но это довольно проблематично.
@sergekost1980 5 ай бұрын
Спасибо, Костя! Ты лучший! С Новым годом :)
@voron-dev 5 ай бұрын
Спасибо большое! И тебя с Новым годом:D
@ivan_karamzin 12 күн бұрын
Как же ты хорош
@dmitriyb4948 3 ай бұрын
спасибо за проделанную работу!) выглядит интересно) подскажите можно ли сделать, что бы в десктопной версии в варианте с уменьшающимися по краям карточками, в середине был не 1 слайд а 3. А по бокам уже уменьшающиеся остальные ))
@Vadim-gv4kk 4 ай бұрын
Добрый день! А можно адаптировать слайдер под изменения масштабирования стараниц браузера? Снижаем масштаб страницы, слайд сам на месте, зероблоки слетают вправо
@rootscape7580 5 ай бұрын
🎉🎉🎉
@arkadyzamatin2678 Күн бұрын
Я конечно ахуе почему этого нет в Тильде в базовой, но это очень крутой урок хорошо что можно добавить самим
@user-sq5vn9bh7q 26 күн бұрын
Подскажите, возможно ли, чтобы при переключении слайдов на зероблоках там срабатывала своя анимация или это фантастика?
@sergeipopov 3 ай бұрын
Очень крутое дополнение, спасибо! Подскажите пожалуйста, есть ли возможность побороть проблемы с sbs анимацией при активной "бесконечной прокрутке"? Или, если нет, то есть ли еще какие-то варианты сделать "торчащий" за экран следующий слайд на мобильной версии но так, чтобы и последний можно было посмотреть :)
@voron-dev 3 ай бұрын
Добрый день, я для sbs анимации специально добавлял совместимость, если вдруг у вас не работает то можете мне в лс отписать со ссылкой на сайт, посмотрю конкретно ваш случай. Но в любом случае выходящиц за край слайд сделать можно и другим способом, поэтому помогу в любом случае
@user-hj9jt1js5v Ай бұрын
Добрый день, подскажите, а как сделать, чтобы уменьшались не боковые слайды а все правее? Чтобы первый был 100 процентов, а другие меньше?
@Tim.M.D. 4 ай бұрын
Спасибо за видео! Я столкнулся с проблемой, понимаю её причину, но всё же решил спросить у вас. У меня большой зеро блок в котором используется несколько слайдеров сразу и проблема в том, что стрелки навигации не работают не на одном слайдере. Вопрос. Могу ли я как-то заставить их работать на каждом слайдере? Или же мне всё же придётся создавать зеро блоки под каждый слайдер?
@voron-dev 4 ай бұрын
Привет, можешь скинуть ссылку на свою страничку в тг чтобы я мог подробнее глянуть - подскажу
@user-gf6ts8nw4b 2 ай бұрын
Спасибо огромное за такую классную модификацию и подробную инструкцию, делала первый раз и все получилось! Но такая ситуация - на странице есть блок с вопросами, аккордеон, реализован другим способом, тоже с кодом, и после того как сделала слайдер, при переходе на сайт он загружается со всеми открытыми вопросами, выключила код слайдера и все норм. Подскажите, пожалуйста, что можно сделать, чтоб они работали вместе корректно?
@voron-dev 2 ай бұрын
Добрый день, отпишите в личку тг с ссылкой на страничку
@user-he4ov9ds6w 3 ай бұрын
Подскажите, подойдет ли этот код для вертикального слайдера? (У меня миниатюрки расположены вертикально, слева от основного фото)
@voron-dev 3 ай бұрын
Да подойдет, в генераторе есть "вертикальный режим"
@lenabersenyova7116 4 ай бұрын
Спасибо очень полезно! А можно сделать что бы слайды медленно двигались на автопрокрутке вообще без остановок? Поэкспериментировала со скоростью прокрутки и автопрокрутки, но ничего толком не получилось.
@voron-dev 4 ай бұрын
Только если попробовать поставить скорость автопрокрутки на 1 и скорость перелистывания на какое-нибудь значение побольше по типу 2000-5000. Вообще если не получится, то можете в лс в тг отписать, подумаем что можно сделать
@RAVA17 23 күн бұрын
а если слайдеров 3 на экране? как сделать так,чтобы изображения не привязывались к 1му слайдеру. нужно дать классы слайдерам и штмл окну?
@voron-dev 23 күн бұрын
Воспользуйтесь настройкой "какой это слайдер по счету на странице". Именно она позволяет это сделать
@mcsha 5 ай бұрын
Добрый день, есть ли вариант при котором можно не ставить window container? У меня все выровнено по сетке, хотела сделать слайдер только на мобильные версии, очень выбивается если ставить по window, если меняю на grid либо часть контента обрезается, либо листается криво, буду благодарна за ответ
@voron-dev 5 ай бұрын
Оставить для слайдов grid container можно только если у нас 1 слайд к показу и html-элемент слайдера выровнен по window container 100% на 100%. Но если вдруг и при таком раскладе не получится, то можете мне отписать в тг, помогу
@user-vt4oy9dt1r 5 ай бұрын
Супер понятно и полезно, спасибо! Подскажи пожалуйста, в чем может быть причина, не работают стрелки навигации. Класс задан, все перепроверила, пробовала и через расширение и через генерацию кода на сайте.
@voron-dev 5 ай бұрын
Проверьте 1 момента: 1) Чтобы стрелки в слоях были выше html-элемента слайдера и их ничего не перекрывало 2) Чтобы слайдов в сумме было больше чем слайдов к показу (потому что если например 3 из 3 слайдов уже показаны, то слайдеру некуда прокручиваться и он переходит в статику). Если оба пункта учтены и все-равно не работает, то отпишите мне в лс в тг, помогу
@user-vt4oy9dt1r 5 ай бұрын
спасибо!@@voron-dev
@YngArty 4 ай бұрын
Добрый вечер, как изменить расстояние между точками навигации? у меня они как-то слишком далеко друг от друга
@voron-dev 4 ай бұрын
Можете отписать в личку тг с ссылкой на страничку - помогу. Вообще наверное в ближайшее время добавлю отдельный пункт в генераторы для этого, но пока дам код и скажу что куда добавить
@hedera_no_helix 3 ай бұрын
Здравствуйте! А подскажите, пожалуйста, как сделать кастомные точки навигации без установки расширения. И большое спасибо, всё очень полезно!
@voron-dev 3 ай бұрын
Можно на сайте по ссылке сгенерировать, ссылку в описании оставил, там инструкция прямо на странице есть тоже
@hedera_no_helix 3 ай бұрын
@@voron-devСпасибо, не заметила)
@cube2156 5 ай бұрын
Подскажите, пожалуйста! Возможно ли совместить кастомный слайдер и кастомную карточку товара в одном зеро блоке ( с вашими кодами ) ?
@voron-dev 5 ай бұрын
Добрый день, да. Часто делают кастомную карточку товара и кастомный слайдер из зеро, который листакт подгружаемые карточкой изображения товара
@cube2156 5 ай бұрын
@@voron-devспасибо за ролик! Планирую совместить блоки VR08 и VR03. Для создания слайдера требуется указать ID блоков через запятую, как это сделать, если фото подтягивается из карточки товара автоматически ( у фотографий нет своего ID) ?
@voron-dev 5 ай бұрын
Стратегия такая: 1) Создаем слайдер зероблоками при помощи мода VR03 2) Создаем карточку товара при помощи мода VR08 3)В слайдере из зеро создаем шейпа и этим шейпам прописываем классы от мода VR08, чтобы он подгружал картинки в шейпы сразу в кастомный слайдер VR03
@cube2156 5 ай бұрын
@@voron-dev большое спасибо за помощь!
@cube2156 5 ай бұрын
@@voron-dev в 3 пункте назначаем классы для шейпов которые уже сделаны для создания слайдера или в самом зеро с html кодом нужно создавать шейпы ? Я назначил классы шейпам, которые я использовал для создания слайдера. Фото подтянулись, но это получился отдельный слайдер от моей карточки товара. Подскажите, пожалуйста, как сделать что бы слайдер был в vr08?
@user-bq2rp8er2x 2 ай бұрын
Привет, а когда более одного слайдера слетают размеры настроенных фото в зеро блоках, как исправить? Спасибо за видео
@voron-dev 2 ай бұрын
Чтобы я мог подсказать мне нужна ссылка на страницу и скрин того как слетают. Можете отправить в тг в лс
@evgeniypak8338 2 ай бұрын
Здраствуйте, спасибо за урок! Все получается! А на созданные слайды как могу добавить видео? Об этом говориться в уроке?
@voron-dev 2 ай бұрын
Как в обычный зероблок
@evgeniypak8338 2 ай бұрын
@@voron-dev это через добавление shape или прям на готовую галлерею? Или всё-таки в html код нужно будет добавить код для видео, а потом вставить видео?
@evgeniypak8338 2 ай бұрын
@@voron-dev оказывается пишет что файл слишком большой как это можно исправить?
@voron-dev 2 ай бұрын
Прожать через компрессор видео - mp4compress.com Если пишет что файл слишком большой, то загружать его не в сжатом формате на сайт это плохая идея, потому что максимальный размер файла - 25мб. 25мб в большинстве случаев весит вся остальная страница полностью, а тут получается вы одним видео хотите увеличить её вес более чем в 200%. Поэтому если пишет что размер слишком большой, то такое видео из соображений быстродействия напрямую грузить на сайт не стоит, и для столь больших видео проще воспользоваться ютубом
@evgeniypak8338 2 ай бұрын
@@voron-dev спасибо
@RuKgSport 14 күн бұрын
Помогите, пожалуйста, у меня при слайде картинка пару милисекунд позднее текста появляется, думал может дело в объеме памяти?
@voron-dev 14 күн бұрын
Можете отписать мне в тг бота в поддержку со ссылкой на страничку или ещё можно попробовать выключить для картинок в слайдере lazyload
@pxpfgx 2 ай бұрын
подскажите, пожалуйста, работают ли эти модификации и на телефоне (и всех других адаптивах) ?
@voron-dev 2 ай бұрын
Да, в видео даже разобрал адаптив:)
@pxpfgx 2 ай бұрын
@@voron-devвсе, увидела) спасибо большое!
@kirbynine5560 Ай бұрын
Слайдер отличный но у меня есть одна проблема с ним. Если уже на открытой странице поменять размер окна браузера или допустим смартфон повернуть горизонтально, слайдер разваливается, контент на некоторых слайдах меняется в размерах и расползается по всему блоку, фиксится только обновлением страницы. Все зеро-блоки адаптированы. Кто-нибудь сталкивался? Может есть какое-то решение, в коде поправить что-то?
@voron-dev Ай бұрын
Можете отписать мне в тг в бота, посмотрю, подскажу
@hgms6150 4 ай бұрын
Пытаюсь сам понять, но может в двух словах скажете как сделать этим методом, но два слайдера, один для моб, другой десктоп?
@voron-dev 4 ай бұрын
Лучше в одном все совместить и сделать разное количество слайдов к показу на разных разрешениях. Можете мне в телеграм отписать с деталями - подскажу
@NOTFORMAT365 5 ай бұрын
Привет, слайдеры не помещаются в сам слайдер в чем может быть причина ? Все блоки отдельно друг от друга после публикации
@voron-dev 5 ай бұрын
Возможно recid указываешь с пристакой #rec. Но если нет, то можешь скинуть ссылку на стр, подскажу в чем проблема
@user-zs8tp7gm1u 5 ай бұрын
привет у меня такая же проблема после публикации@@voron-dev
@voron-dev 5 ай бұрын
Привет, можешь скинуть ссылку на страничку в лс в телеграмм? Посморю прямо в коде стр в чем проблема и помогу
@AviLanis 4 ай бұрын
Супер, спасибо за код и видос! Правда возникла 1 проблема( Слайды немного сдвигаются вправо, и получается что 3 слайд не помещается целиком в видимую бласть. Уже вроде все настройки посмотрела-не пойму в чем проблема. Может кто подскажет?
@voron-dev 4 ай бұрын
Проверьте чтобы контент в слайдах был выровнен по window container и прижат к левому краю. Если он уже выровнен по window и прижат, то можете мне в тг в лс отписать с ссылкой на страничку - гляну, помогу
@Horoshichelovek123 5 ай бұрын
А как сделать так, чтобы боковые слайды выглядывали на десктопе, как в версии телефона
@voron-dev 5 ай бұрын
Имеешь в виду чтобы также за края экрана выходили? Просто ставишь больше количество слайдов к показу, соответственно больше по ширине рассчитываешь html-элемент, чтобы он также как и в мобильном выходил за края контейнера и все
@you_humor1 2 ай бұрын
Что делать если у меня полоса от соседней катрочки появляеться что не должно быть
@you_humor1 2 ай бұрын
И кнопки кусочек мигает проявляеться и исчезает бывает такое
@voron-dev 2 ай бұрын
Без ссылки на страничку вряд ли смогу подсказать. Можете отписать мне в тг в бота, с ссылкой, гляну
@sh1shochka 5 ай бұрын
Привет, расскажи пожалуйста как сделать личный кабинет и регистрацию, заранее спасибо ❤❤❤❤
@sergekost1980 5 ай бұрын
Ну вообще, это стандартная функция Тильды и в мануалах есть куча инфы по этой теме (а так же есть видео на канале Тильды). Если конечно, речь не идёт о чём-то кроме стандартных функции )
@sergekost1980 5 ай бұрын
kzfaq.info/get/bejne/iNqBnrl617HTlGw.htmlfeature=shared
@sergekost1980 5 ай бұрын
kzfaq.info/get/bejne/ZsddaspixLzImnU.htmlfeature=shared
@user-od5hp8ov5f 2 ай бұрын
У меня почему-то нет возможности включить переключение свайпом :(
@voron-dev 2 ай бұрын
Отпишите в лс тг с ссылкой на страничку где не получается, экранкой проблемы - помогу
@chipchilinka5645 3 ай бұрын
А что за расширение?
@voron-dev 3 ай бұрын
kzfaq.info/get/bejne/bJ-hfKabzK7JqYk.html
@user-gq3ru4em9v 21 күн бұрын
Чат, памагите плиззз... все работает кроме кнопок. Не могу понять что не так
@shash5161 3 ай бұрын
Не отображаются блоки в слайдере, просто белый фон😢
@voron-dev 3 ай бұрын
Можете отписать в лс в телеге с ссылкой на страничку где не получается сделать - помогу
@user-es9co9yw7j 4 ай бұрын
2ой способ не работает если делать через расширение. По итогу сделал скрипт вручную
@voron-dev 4 ай бұрын
Можете подробнее расписать мне в тг в лс что не получается сделать? Помогу, подскажу
@user-es9co9yw7j 4 ай бұрын
@@voron-dev да, не могу разобраться как убрать прозрачную надпись под слайдером "Tilda Publishing"
@user-es9co9yw7j 4 ай бұрын
Разобрался похоже ))
@user-jk6dq9jk4b 3 ай бұрын
@@user-es9co9yw7j Можно мне тоже ваш скрипт? А то у меня Адаптация ни как не встает. Код на сайте с генератором не работает толком. Только ПК версию и моб, версию(320px) нормально отоброжает.
@eliseysilovi4749 2 ай бұрын
Кнопки не работают
@crazyluckyyyyy Ай бұрын
я вроде не совсем дурак) но как это возможно, что htnl вовсе не прогружается) что за бред?) 30 раз пересмотрел все)
@voron-dev Ай бұрын
Отпишите в тг бота с ссылкой на сайт, гляну подскажу
@transitpark 4 ай бұрын
Не работает
@voron-dev 4 ай бұрын
Если возникли проблемы с настройкой слайдера то можете отписать мне в лс в телеграмм с ссылкой на страничку где не получается. Гляну, скажу что делаете не так
@user-hj9jt1js5v Ай бұрын
не работает. Ни код, ни рега..
@voron-dev Ай бұрын
Так, чтобы я мог помочь мне нужна хоть какая-то информация:) Можете мне в тг отписать, подскажу
@user-qk4fh7iq8y 5 ай бұрын
Если рассказываешь для новичков. то думай как учитель. А похвастать своими знаниями в другом месте можно.
@voron-dev 5 ай бұрын
Друг, если у тебя что-то не получилось, то ты всегда можешь спросить у меня в лс в тг. А "похвастать знаниями про свой бесплатный слайдер у себя на канале, с пошаговыми инструкциями без редактирования кода" даже звучит абсурдно:)
@paulnicholas8789 4 ай бұрын
@@voron-devпочему то вот есть такие люди. Тратишь свое время, даешь им бесплатную пользу, кладешь им в рот, разжевываешь за них, а они потом недовольны) Наверное, потому что слишком просто достается. Ну, желательно просто смириться, думаю) Спасибо тебе большое за твой труд, дружище!
@0laD1ck Ай бұрын
Все отлично, но возникла одна проблема: появился 1 пустой слайд, без изображения. Как решить эту проблему, подскажи, пожалуйста?
@voron-dev Ай бұрын
Привет, отпиши мне в тг в бота с ссылкой на страничку, гляну
@0laD1ck Ай бұрын
@@voron-dev, спасибо, проблему решил. Все банально: в поле, где вводим rec блока после последнего поставил запятую и пробел. Из-за этого образовался пустой слайд)
Давид Аветисян | Сайты на Тильде
Рет қаралды 37 М.
Дмитрий Варфоломеев
Рет қаралды 15 М.
Школа Молнии для дизайнеров сайтов на Тильде
Рет қаралды 54 М.
Study Kvo. Обучение веб-дизайну и UX UI
Рет қаралды 65 М.