Слайдер в zero block Тильда.
ฝัง
- เผยแพร่เมื่อ 11 ก.ย. 2024
- Привет. Сегодня узнаем как сделать автоматический слайдер с вашим контентом в Zero Block. Создадим связку из слайдера и Zero ZBlock и свяжем скриптом. Всё очень просто.
Готовый скрипт в описании под видео.
___________________________________________________________
Если останутся вопросы, пишите в комментариях.
Ссылка для скачивания скрипта docs.google.co...
Единственное толковое и понятное видео по этой теме! Огромное спасибо!
Рад быть полезным.
Это де просто какое то спасение!!! Два дня я ломаю голову над этим! Благодарю вас!!!
Я рад, что вам помогло.
Заколебался искать, как легко сделать слайдер, везде непонятно. Спасибо за видео, сделал за 10 минут!
Добрый день , Артём
Спасибо большое вам за видео , оно действительно помогло !
Всё доступно и понятно объяснили и теперь я умею делать автоматический слайдер
Я посмотрел комменты. У многих послетал код. Возможно были изменения в коде браузеров. Я не занимался этой проблемой. Если решу вопрос этот я обязательно сделаю поправку и залью новый код. Так же залью видео с решением проблемы.
Отлично, полезную информацию для себя получил. Спасибо!
Блииин, спасибо! Это видео - просто спасение!!!! Я сперва мучилась с другим, гигантским кодом, сидела над ним два дня!!! Благодаря этому видео - управилась за 40 мин!
Огромное спасибо!
Единственное видео, в котором объяснили, почему появляется пустая страница) у меня было именно так после выставления медленной анимации, все мозги сломала, пока не наткнулась на ваше видео) Спасибо!!!
Я рад, что было полезно.
Спасибо, всё, получилось!
Я искал это видео,на конец то нашёл!
его)
Что делать, если в Зеро блоках есть галерея, и основной слайдер СR30N глючит видимо изза этого, первый показывает нормально, второй и третий исчезает галерея и нижние края?
Единственное годное видео! Спасибо большое !
Всем привет, у меня тоже слетело все на мобильной версии. Как удалось решить вопрос:
1. У всех текущих слайдов выставить диапазон видимости 980 и больше (включая html и сам слайдер)
2. Все продублировать еще раз и поставить диапазон 980 и меньше (включая html и сам слайдер)
3. Скрыла дублированные слайды
4. Теперь внимательно, пример для 3 слайдов: изначально порядковые числа шли как надо 1,2, 3 (на десктопе), там где мобильная версия в коде слайды стоят по другому порядку 2, 1, 3
5. Копия первого слайда стала СЛАЙДОМ 3!!! Напомню, все копии мы скрыли! Копия второго стала СЛАЙДОМ 1!!!
Возможно эти копии можно удалить, но я от греха подальше не буду.
отличное видео! спасибо!!!
Спасибо тебе большое за видео!
Максим, напиши почту, я скину.
@@protilda-.6368 Доступ получил, благодарю!
Очень помог, спасибо большое)
Классно!
от души, все четко! спасибо
Благодарю, крайне полезно оказалось! Только не понял, для чего выставлять 100 у высоты контейнера в зеро-блоках. Попробовал с этим значением и без него. Вроде на десктопе и мобильном разницы нет. А вот промежуточные нормально отображаются только когда 100 не выставлено. Иначе фон продлевается сверху до низу, чего не нужно. Может, есть какие-то нюансы, которых я не заметил?
Скрипт не работает в сафари. Можно как-то решить?
Красава спасибо тебе дружище!
Спаситель мой!!!
Бро, ты лучший!
СПАСИБО.
Рад быть полезным.
Какая крутая штука!!
ничего не получилось( Не могу понять почему, ведь все правильно сделано, код прописан правильно. В чем может быть причина?
Артём, добрый день! Возникла проблема с кодом, по какой-то причине перестали отображаться блоки по порядку (хотя изначально все было - ок)
Подскажите, как это можно устранить ?
Тоже работало всё отлично, а в последние дни возникла проблема. Вдруг перестал отображаться 3-й слайд из 3-х. Вместо него просто белый блок. Хотя, стрелки работают на нажатие (хоть их и не видно). В мобильной версии то же самое.
@@user-dh3gt4pw5q вот у меня так с первом слайдом. Я решила эту проблему так: просто продублировала первый слайд, но все равно в самом конце просто белый блок отображается и его никак не убрать.
Последний слайд обрезается и показывается не полностью на мобильной и десктопной версии. Как это поправить?Сделала копию
Видео бесполезно, код не работает, не тратьте время
Скрипт не работает в моб. версии. Подскажите как решить?
Всем привет, у меня тоже слетело все на мобильной версии. Как удалось решить вопрос:
1. У всех текущих слайдов выставить диапазон видимости 980 и больше (включая html и сам слайдер)
2. Все продублировать еще раз и поставить диапазон 980 и меньше (включая html и сам слайдер)
3. Скрыла дублированные слайды
4. Теперь внимательно, пример для 3 слайдов: изначально порядковые числа шли как надо 1,2, 3 (на десктопе), там где мобильная версия в коде слайды стоят по другому порядку 2, 1, 3
5. Копия первого слайда стала СЛАЙДОМ 3!!! Напомню, все копии мы скрыли! Копия второго стала СЛАЙДОМ 1!!!
Возможно эти копии можно удалить, но я от греха подальше не буду.
sps!
Добрый день! Спасибо за видео, получилась отличная галерея. Подскажите, как можно наложить на эту галерею вертикальное меню, если оно сделано в зеро блоке? Или можно ли наложить стандартное меню ME403 на эту галерею и зафиксировать его на десктопе? Спасибо!
Хороший вопрос. Я не пробовал. Вообще скрипт обрабатывает всё что внутри контейнера. Поэтому не должно быть пооблем. Попробуйте. Если честно, я не делал.
@@protilda-.6368 Пробывала. С меню ме 403, все равно остаётся висеть боковой бургер, и ничего не фиксируется, вертикальное меню в зеро блоке просто висит блоком сверху и не накладывается. Может есть скрипт наложения зеро блока на такую галерею?
@@user-xh7ed2ki4p Наверно я тут Вам не помогу.
Если мне удастся решить этот вопрос, я Вам напишу.
Друзья, у кого проблема с отображением на мобильном (блоки не добавляются в карусель):
1. Зайдите на страницу
2. Отключите другие сторонние скрипты (скрыть блок)
3. Проверьте работоспособность слайдера
4. Включайте другие скрипты по одному, чтобы понять какой код блокирует отображение в мобильной версии.
все блоки отключил но проблема остлась. Не нашли решения??
@@bad_bad_k Всем привет, у меня тоже слетело все на мобильной версии. Как удалось решить вопрос:
1. У всех текущих слайдов выставить диапазон видимости 980 и больше (включая html и сам слайдер)
2. Все продублировать еще раз и поставить диапазон 980 и меньше (включая html и сам слайдер)
3. Скрыла дублированные слайды
4. Теперь внимательно, пример для 3 слайдов: изначально порядковые числа шли как надо 1,2, 3 (на десктопе), там где мобильная версия в коде слайды стоят по другому порядку 2, 1, 3
5. Копия первого слайда стала СЛАЙДОМ 3!!! Напомню, все копии мы скрыли! Копия второго стала СЛАЙДОМ 1!!!
Возможно эти копии можно удалить, но я от греха подальше не буду.
Спасибо! Все понятно и доступно! Сделала и все сработало! Только один нюанс появился, на мобильной версии после слайдера стоит пустой черный блок, никак не пойму как его убрать, на других версиях такого нет! Методом тыка выяснила, что это отражается пустой блок слайдера, кто-нибудь может подсказать как его убрать с мобильной версии?
Заранее благодарю за ответ
у меня такая же проблема!
Уже писала комментарий благодарности, но тут какая-то ерунда вылезла. У меня ИНОГДА слетает код и на опубликованном сайте, при переходе по ссылке появляются все блоки, которые я создавала для слайда. Потом обновляю страницу и все встает на свои места. Помогите, пожалуйста)
Настя, Я давно не занимаюсь тильдой уже. Сейчас случайно зашёл на свою страницу а тут столько комментов. Не смогу Вам помочь.
Как сделать Слайдер из слайдеров в зеро блоке? К примеру я в зеро блоке размножил галерею слайдеров до 10 штук и хочу из них создать бесконечную галерею, при этом добавить текст к каждой галереи
Здравствуйте! Подскажите, в чем может быть проблема: мне нужно 12 слайдов, но у меня отображается не больше 3 слайдеров с таким кодом. Объясните почему?
P.s.: id копировала с пробелами, кавычками, вставляла туда id своих блоков, но все равно не идет
Добрый день, скорее всего в некорректном написании Id. Возможно где-то поставили запятую не правильно или ещё что то. С этим скриптом без разницы сколько слайдов будет.
@@protilda-.6368 тоже столкнулся с такой проблемой. добавил id, добавил слайд. слайдер перестал отображаться
@@protilda-.6368 у меня четвертый слайд не показывает, а остальные три показывают(
Привет. Что - то поломался код. На десктопе норм на мобильной - не видит два блока почему то и просто открыл их, в чем может быть причина?
Всем привет, у меня тоже слетело все на мобильной версии. Как удалось решить вопрос:
1. У всех текущих слайдов выставить диапазон видимости 980 и больше (включая html и сам слайдер)
2. Все продублировать еще раз и поставить диапазон 980 и меньше (включая html и сам слайдер)
3. Скрыла дублированные слайды
4. Теперь внимательно, пример для 3 слайдов: изначально порядковые числа шли как надо 1,2, 3 (на десктопе), там где мобильная версия в коде слайды стоят по другому порядку 2, 1, 3
5. Копия первого слайда стала СЛАЙДОМ 3!!! Напомню, все копии мы скрыли! Копия второго стала СЛАЙДОМ 1!!!
Возможно эти копии можно удалить, но я от греха подальше не буду.
Так вот он какой Zero блок 😂
Спасибо за материал, все четко и понятно! все получилось) только почему-то в мобильной версии элементы из "слепой зоны" оказываются видимыми. Посоветуй, пожалуйста, как исправить в мобильной версии lab-of-art.ru/12346
без слайдера эти картинки обрезаются нормально
Спасибо!!!!
Добрый день. Проверьте привязку к контейнерам, и посмотрите размеры блоков. Я не сталкивался с такой проблемой. Я посмотрю конечно.
Здравствуйте! У меня такая же проблема.
Удалось найти решение?
В мобильной версии при добавлении 5 зеро блоков в слайд, первый дублируется дважды и четвертый по счету исчез. А если смотреть дальше, то 2 зеро блока находятся ниже слайда... Код не рабочий для адаптации. Для декстопа все четко работает. А в мобилке нет
Да. код поломался... Очень печально
@@user-qp4lg9uu6p Всем привет, у меня тоже слетело все на мобильной версии. Как удалось решить вопрос:
1. У всех текущих слайдов выставить диапазон видимости 980 и больше (включая html и сам слайдер)
2. Все продублировать еще раз и поставить диапазон 980 и меньше (включая html и сам слайдер)
3. Скрыла дублированные слайды
4. Теперь внимательно, пример для 3 слайдов: изначально порядковые числа шли как надо 1,2, 3 (на десктопе), там где мобильная версия в коде слайды стоят по другому порядку 2, 1, 3
5. Копия первого слайда стала СЛАЙДОМ 3!!! Напомню, все копии мы скрыли! Копия второго стала СЛАЙДОМ 1!!!
Возможно эти копии можно удалить, но я от греха подальше не буду.
@@user-tw9qj5hs4z не могли бы Вы пожалуйста подробно описать решение. Пытался сделать как написано, но не работает, поэтому и прошу разжевать))
Трития слайдер, кнопка submit как изменить? Хотель изменить submit-отправить
Код постоянно слетает(( а так всё хорошо начиналось....
На эплах в гугл хроме не работает почему-то скрипт. Причем всё было хорошо, но в какой-то момент перестало работать.
Такая же проблема. На маке все плывет, а на винде все работает. Подскажите, пожалуйста, как можно исправить эту проблему
@@user-pc6lt3hi9p Может нашли как решить эту проблему?
@@user-pz7oo4rc9j да, я нашла видео на канале «Андрей Куликов», там код более грамотно написан🙌🏻 надеюсь, вам это поможет
по данному скрипту не будет работать слайдер, если ты сделаешь анимацию обьектов png в нутри зеро блока!!!!
родной прошу помоги ! как в зеро поставить таймер очень надо !
Четвертая слайдер не добавляется, поставил код ID блока
Спасибо огромное, мне этого урока не хватало. Протестировал на разных устройствах, нашел один глюк на телефоне Pixel 3a
drive.google.com/file/d/1hvXkPkxf93Z-0p8elV-QO-qeYqRzmhWS/view?usp=sharing
Что это может быть? И как побороть?
Привет, не встречался с такой проблемой. Посмотрю, если пойму, отпишусь.
не работает должным образом
Добрый! Код не работает, делала все, как на видео. Несколько раз перепроверила код. На опубликованной странице отображаются все блоки, в том числе и первый cr30n. Как думаете где может быть ошибка?
Добрый деь. Скрипт рабочий. Проверенно не однократно. Я конечно ещё раз проверю, но как же я смог записать это видео? Там же даже сшивок нету
var slides = $("#rec258888239, #rec258888676, #rec258890660, #rec258892035, #rec258893121"); без кавычек попробуйте !
Создали галерею CR30N
Создали 3 ZeroBlocka
Создали копии последнего и первого ZeroBlock
Добавили скрипт на страницу
Скрипт добавляем в блок ДРУГОЕ►T123
В коде изменили ID наших блоков
@@protilda-.6368 с анимацией внутри зеро блока скрипт не работает
Это я для себя тайм коды пишу
1:19 название слайдера
Памагите.... Мобильная версия отображается не корректно, слайдеры отображаются в разнобой
А как задать конкретный размер под моб версию, что бы фото отображалось полностью и корректно?
Для корректного отображения при разных разрешениях вам нужно настроить это отображение внутри каждого Zero-блока (в режиме редактирования сверху есть переключалки). Сам слайдер здесь роли не играет.
@@Dr.Aibolit Добрый день! Т.е размер моего слайдера будет зависеть от того, какого размера фото я загружу и сверстаю потом на других версиях, а не наоборот?)
Здравствуйте! Перестал работать код для моб. версий. В мобильной версии теперь съезжает два слайда вниз.
Поделитесь, как кто решил эту проблему?
Нашли как решить это? Такая же беда
Всем привет, у меня тоже слетело все на мобильной версии. Как удалось решить вопрос:
1. У всех текущих слайдов выставить диапазон видимости 980 и больше (включая html и сам слайдер)
2. Все продублировать еще раз и поставить диапазон 980 и меньше (включая html и сам слайдер)
3. Скрыла дублированные слайды
4. Теперь внимательно, пример для 3 слайдов: изначально порядковые числа шли как надо 1,2, 3 (на десктопе), там где мобильная версия в коде слайды стоят по другому порядку 2, 1, 3
5. Копия первого слайда стала СЛАЙДОМ 3!!! Напомню, все копии мы скрыли! Копия второго стала СЛАЙДОМ 1!!!
Возможно эти копии можно удалить, но я от греха подальше не буду.
@@daria5005 Доброго вечора! Вам вдалося вирішити цю проблему?
Привет) Можешь, пожалуйста, дать доступ к файлу со скриптом?
Да конечно
Извиняюсь за неудобство. Открыл доступ для всех.
А почему на мобильной версии не работает слайдер?
Не могу сказать, должен работать.
На мобильной версии не работает
Дратути, ц нвч укеейс с 8 соалйами ? Нужно убрать из айди 1 и последний слайд и вместио этого внизу кода поменять айди дубликатов местамиБ комменты кодово неправиьлно подписаны на самом деле и по факту