ОТВЕТ ПРО АДАПТАЦИЮ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА В мобильной версии не поместится вместить две, три и более карточек. Поэтому 2 варианта: 1. Растянуть шейп вертикально и делать карточки внутри него тоже вертикально друг за другом. Все должно работать, как на ПК. Просто слайдер станет вертикальным и длинным. 2. Сделать горизонтально, чтобы карточки выходили за край устройства. И затем добавить горизонтальный скролл. Таким образом карточки будут листаться на мобильном пальцем горизонтально. Пример, как это может выглядеть на одном из моих сайтов - linkparty.ru А сам код для горизонтального скролла - romanyu.ru/skroll-s-uderzhaniem-knopki-myshi Важно, чтобы не конфликтовал код, сделать два блока. Один слайдер для ПК с отображением 1200рх и до бесконечности с кодом из моего видео, а второй до 1200рх и с горизонтальным скроллом ___________________________________ Если Вы хотите сделать несколько таких слайдеров на одной странице, то не забудьте поменять в новом коде: класс шейпа, ID слайдов, ссылки на стрелки (например, «#slider_left1» и «#slider_right2»), а также ОБЯЗАТЕЛЬНО класс «tildoshnaya-slider-owl» смените на какой-нибудь другой (например, «tildoshnaya-slider-owl1») ___________________________________ Инструкция в текстовом формате + html-код - maxklimkov.ru/blog/tpost/peakgkvho1-kak-sdelat-slaider-na-tilde-iz-zero-blok ___________________________________ Мой сайт с портфолио - maxklimkov.ru Instagram - instagram.com/klimkovmax Telegram - t.me/MaxKlimkov Вконтакте - vk.com/klimkovmax
Это круто! Спасибо) Но у меня, когда я сделал отдельный блок уже с горизонтальным скроллом (для мобильной версии при использовании кода, что в описание) при пролистывание идет смена фона, т.е. виден сам фон блока темнее, а те карточки, что не в зоне блока у них фон менее насыщен... И тем самым видна граница стыковка цвета В чем может быть проблема? Подскажите, пожалуйста))
Спасибо, полезное видео. Благодаря ему закрыл несколько собственных вопросов. Вроде и слайдер такой не нужен, но залип с просмотром, так как теперь стал понятен принцип работы.
Лайка, подписка! Пили пили, контент! Я как граф диз. сейчас активно ищу инфу по тильде в зеро, на ютубе мало такого. Сейчас самое время что бы влететь! Буду рекомендовать твой канал и блог друзьям. Красава.
Как же вы мне сильно помогли!))) Хотелось реализовать интересную идею в зеро блоке для заказчика и в вашем видео я нашла именно то, что искала Все работает Спасибо огромное))))))))))
Спасибо большое за это видео! Очень помог, Макс 👍🏻 На твоем сайте с инструкцией прочитала информацию по поводу автоматической прокрутки слайдов - это то, что мне нужно было! Правда, когда я вставляла этот код для прокрутки после абзаца с адаптивностью, то у меня слетал весь слайдер. Я немного посмотрела, подумала и попробовала вставить код для прокрутки наоборот ВЫШЕ абзаца с адаптивностью и после этого все заработало: и сам слайдер, и автоматическое прокручивание слайдов! Одним словом, круть, подписалась на канал 😁
Максим, спасибо огромное!! очень полезное видео. Сначала не получилось. Ребятки, у кого не получается проверьте все КАВЫЧКИ в коде, у меня не хватало закрывающей кавычки )))
Там ещё в скрипте можно включить-отключить зацикливание прокрутки и точки-контроллы. Так же можно закомментить путь до CSS-ок, которые находятся на cloudflare, и в Тильде вставить содержимое этих CSS-ок, внеся правки, изменив в них, например, цвет и размер точек-контроллов.
Максим, спасибо огромное! Просто чудеса!!))) Конструктор сам работает, вот наполню контентом и надеюсь всё так же будет работать) У меня один вопрос: нужно листать слайды влево, вправо листаются когда уже влево отмотал, а привычнее всем листать слева направо - это как-то изменить? Если нет, переживём, конечно, просто интересно. Спасибо!
Анимация "block\element on screen", установленная на объекты блоков, которые будут крутиться в слайдере, начинает работать сразу, как только блок со слайдером появится на экране. Как бы сделать так, чтобы эта анимация начинала отрабатывать по мере пролистывания?
Здравствуйте! оч крутой гайд, все работает отлично, спасибо! Если можно, то прошу дополнить его кодом на срабатывание слайдера при наведении мыши на шейп. Заранее благодарю!
Кто-нибудь знает, от чего при добавлении этого кода на страницу перестаёт работать SBS анимация? 🤔 *оказалось, это распространённая проблема и её вызывает значение true у параметра loop. Фиговый код... Жалко 😒
Добрый день! Спасибо за полезное и понятное видео!) Все замечательно работает, но хотелось бы добавить автоматическое перелистывание слайдов. Прочитала ваше примечание в текстовой инструкции и добавила код, слайдер перестал работать совсем( Убираю дополнительный код - все работает, добавляю - ломается. Подскажите, пожалуйста, что может быть с ним не так, в чем ошибка? Очень нужно сделать автоматическое перелистывание!
не понимаю, как сделать адаптив из пункта 1? если в мобильной версии шейп растягиваем в длину, то он ведь обрезается, потому что в коде указывали фиксированную высоту...
Очень полезное и понятное видео, большое спасибо))) Единственный вопрос остался про адаптацию. Что именно нужно прописать в коде внутри скобок, в пункте адаптивность?
Привет! Все делала по инструкции, перепроверила все по Виндоу контейнеру, а слайды в шейп не подгрузились, идут отдельными блоками( в основном блоке на фон подгружена картинка как заливка блока
Здравствуйте, спасибо за урок, получилось сделать переключение слайдеров, но появилась проблема. На основном блоке у меня есть подложка из картинки, на блоках с карточками я сделала фон без цвета, но когда открываешь сайт, там контейнер стал белым, как бы не настраивала, не могу убрать. Подскажите, пожалуйста, в чем может быть проблема, или как исправить?
Все отлично получилось, но! я сделала один слайдер, он работает, сделала рядом второй, не работает. Карточки листаются, но плывут по всему экрану. проверила код уже раз 20, переделала заново, все точно также. Что делать? не могу найти информацию как сделать 2 слайдера в одном блоке.
Очень круто! у меня все получилось! Только вопрос есть один вопрос. У меня шейп не белый, я его залила нужным цветом (зеленый), но внутри карточки другого цвета (белые) и почему-то именно текст у меня на этих карточках остался на зеленом фоне. То есть поучается, что текст карточки на щеленом фоне, а сама карточка белая, выглядит странно..Фон текста карточки не могу перезалить, хотя в редакторе отображается, что карточки и текст на белом фоне..Не знаете, как это можно изменить? :-)
Спасибо большое) А Шейп не нужно заливать. Нужно убрать у него заливку, чтобы он стал прозрачным. А фон блока можно в настройках самого блока регулировать)
Привет, а есть ли вариант сделать так, что бы карточки слайдера выходили за его границы? Нужно наверное что то с .overflow попробовать, но у меня не очень получается... Вообще ноль реакции
Привет! Можно изменить размер шейпа, в котором эти карточки, например А если надо, чтобы карточки располагались горизонтально и уходи за экран, то можно попробовать использовать эту модификацию - romanyu.ru/skroll-strelki
@@MaxKlimkov Да, спасибо ) Я тоже его вчера ночью нашёл, всё отлично работает. Жаль с этим кодом пока нет вариантов сделать так же, был бы универсальным
Спасибо за урок, очень помогло! У меня вопрос: можно ли как-то сделать отображение номера слайда вроде "1/5"? Кучу информации перерыла - ответ именно для тильды не нашла, а навыков программирования не хватает, чтобы разобраться.
Всё работает кроме кнопок. Как только нажимаю на кнопку, слайдер пролистывается и сразу исчезает (сделала это в поп апе). Почему кнопка может закрыть поп-ап?(
Привет, классное видео, правда я косячнул, сделал его таким образом что под мобилку его не адаптировать) Придется по одной карточке делать, а не по три, как я хотел. А карточек 19 шт. Но проблема в том, что тогда в 1200 слайдер в 1 карточку будет выглядеть очень маленьким по ширине. В таком случае что бы в 1200 слайдер был в три карточки а в мобилке в одну, надо будет делать два слайдера? Или есть способ сделать это с помощью одного?
Привет! Спасибо!) Я бы делал для компьютерной версии, как нужно - три карточки в одном слайде. Только главное, чтобы они не были слишком маленькие и хорошо воспринимались. Но на компьютере должно быть окей) А вот на устройствах поменьше три карточки в любом случае не поместятся в один экран. Соответственно, либо делать их вертикально, либо сделать горизонтально, чтобы они выходили за край устройства. И затем добавить горизонтальный скролл. Таким образом карточки будут листаться на мобильном пальцем горизонтально. Пример, как это может выглядеть на одном из моих сайтов - linkparty.ru А сам код для горизонтального скролла - romanyu.ru/skroll-s-uderzhaniem-knopki-myshi Важно, чтобы не конфликтовал код сделать два блока. Один слайдер для ПК (1200рх и до бесконечности) с кодом из моего видео, а второй до 1200рх и с горизонтальным скролом
Привет, спасибо за видео! А можно ли как-то отрегулироваться скорость автоматического переключения слайдов? И есть ли возможность отключения автоматического перелистывания?
Привет! Найдите в коде строчку "nav:false,". Ниже напишите следующие строчки с новых абзацев через запятую: autoplay: true, autoplayTimeout: 5000, Первая включает автоматическое переключение, а вторая задает задержку слайда в миллисекундах. Вы это имели ввиду под скоростью переключения?
@@MaxKlimkov Попробовал, как то странно работает) autoplayTimeout если ставлю низкое значение, что бы быстро переключало слайды - работает. А если высокое (что бы слайды дольше не переключались) - то не работает, всё равно переключает так же быстро, как и без этого параметра в коде. А "autoplay: false," - вообще не заработал, всё равно переключает слайды) я хз, может я что-то не так делаю
Привет! Конкретно по этому коду не подскажу, так как обычно меняю готовые решения, сделанные под тильду (например, беру код из сайта mo-ti.ru ). Но можно сделать очень похожую анимацию через этот код (romanyu.ru/skroll-strelki ). Также делаете карточки в ряд на зеро-блоке, вставляете код по инструкции из ссылки. А чтобы карточки при пролистывании скрывались, можно сделать слева от них прямоугольник (шейп) под цвет фона. То есть они будут уезжать при пролистывании под этот шейп. Очень минималистичный и некрасивый пример сделал, но все же видно как работает:) - maxklimkov.ru/page20398924.html
Спасибо за видео! У меня работают все экраны, кроме мобильного 320. На нем едет весь текст, он сливается так, что слово само переносится по частям на следующую строчку (даже одна последняя буква типа "налога-м"). Подскажите, пожалуйста, почему такое может быть?
Если именно слова странно переносятся, то попробуйте создать отдельный блок Т123, поместить его внизу сайта и туда этот код поместить: .t-rec { word-break: normal !important; }
Так, первый раз все получилось отлично! Решила реализовать эту идею снова, уже для другого сайта и там в карточке еще видео должно быть. Не работает. Все встает криво/косо. Делала по инструкции, не пойму, это из-за видео такой лаг?
Большое спасибо за видео! Очень помогло, но столкнулась с проблемой: у меня слайдер из картинок (перелистываются по очереди 5 картинок). То есть в мобилке все норм помещается и нет смысла делать другие блоки. Когда загрузила код - на десктопе все супер работает и переключается кнопками, а вот в мобилке -кнопки есть, но не реагируют и не переключают слайды (картинки). Картинки перелистываются свайпом (это прикольно, но мне бы кнопками сделать)... подскажите, пожалуйста, как можно пофиксить, чтобы кнопки на мобилке работали тоже(((
Здравствуйте. Столкнулась с проблемой, что этот код тормозит анимацию в других блоках. Отключаю код и анимация работает как надо... Можно ли это исправить?
На фон всего блока имеете ввиду? Конечно. В основном блоке (где прозрачный Шейп) добавляете картинку и делаете ей 100% по высоте и ширине по window container (именно в процентах). И ставите на задний план Или можно просто загрузить фоном через кнопку в настройках зеро-блока
Здравствуйте! Подскажите, пожалуйста, сталкивались ли вы с такой проблемой: Когда вставляем png картинку как один из слайдов - то фон замывается весь. Никак не получается органично вставить этот слайдер в проект. Можно ли как-то убрать это размытие? Уже всё параметры перещелкал. Возможно, что-то просмотрел((
ПОМОГИТЕ 🙏🏻 Сама инструкция очень крутая! У меня всё получилось сделать. Я делала полноэкранный слайдер. НО в мобильной версии у меня контент съехал слево, хотя везде шейпы выровнены в мобильной версии. Помогите, пожалуйста
Ситуация такая: по инструкции у меня получилось делать слайдер, но есть одна проблема. На самих карточках у меня были кнопки, при нажатии на которую, ты переходишь на другую страницу. И кнопки были с пошаговой анимацией при наведении. Сейчас в слайдер они не работают вообще. Такое ощущение, что просто картинки листаю (как в галерее). Что делать, помогите :(
Добрый день. Попробуйте вставить этот код в тег /script function auto_play() { $("[href='#slider_right']").click()}; var timemode = 2000; var autoPlay = setInterval( auto_play, timemode )
Спасибо, все получилось! Подскажите пожалуйста, как сделать автопрокрутку? Увидел ниже комент, вы предложили добавить код /script, но как это делать не очень понимаю - куда именно его там вклеить надо?
@@MaxKlimkov Максим, нашел спасибо. Вы бы не могли скинуть полностью этот код сюда, а то что-то когда я его вставляю, слайдер просто пропадает. Возможно отступы как-то не правильно вставляю?
Спасибо, слайдер очень хорошо влился в проект) но есть проблема с фоновыми элементами( Блок покрашен в черный, на фоне красные пятна, к сожалению пятна перекрывает слайдер (тоже черного цвета) хотя заливку я убирала. В чем может быть проблема?
Спасибо за комментарий! Проверьте в слоях, чтобы пятна были под всеми элементами. Если не помогает, то кодом с помощью параметра z-index можно сделать, чтобы пятна ушли на задний план. Или вариант сделать картинку (черный фон с пятнами) и ее залить, как фон
@@MaxKlimkov пробовала, но почему-то главный шейп словно перекрывает второстепенный шейп и даёт белый цвет, карточки у меня тоже с удалённым фоном, если это вдруг имеет значение
Работать - да, но удобно ли? В мобильной уже не поместится две карточки рядом, поэтому либо их располагать вертикально одну за одной, но не удобно тогда листать, либо делать их все горизонтально и добавить код для горизонтального скролла. Например, этот - romanyu.ru/skroll-s-uderzhaniem-knopki-myshi
очень крутое видео, спасибо за полезный контент☺!!слайдер работает, только возникла проблемка, в слайдах я скруглила углы у шейпа-плашки, и при отображении слайдера эти углы заливаются серым, хотя заливки на фоне нет, почему не сохраняется прозрачность? не знаю как быть🥲
спасибо огромное! У меня вопрос про адаптивность. все настроила как указанно в видео, в адаптивах все в левом верхнем углу, макеты подровняла по высоте карточек. но, когда с телефона захожу, галерея смещается в лево, хотелось бы ее по центру видеть, как это исправить?
Да, может быть такая проблема из-за того, что выравнивание именно по window container идёт. Поэтому тут вручную подбирать, двигать наоборот вправо Либо воспользуйтесь методом, который я предложил, в закреплено комментарии. Сделать горизонтальным скроллом
проблема с фоном, он размывается, блюр везде убран, цвет фона в зероблоках убран, но картинка на фоне в основном блоке размывается шейпом слайдера, я уже не знаю как это пофикстить, помогите
@@MaxKlimkov Cпасибо, я разобралась!!) Но другая проблема, у меня шейп(который прозрачный), при публикации сайта отображает фото, которое у меня загружено на фоне самого блока, как можно исправить?)
@@MaxKlimkov Я несколько раз точно по инструкции сделал, но у меня не работает слайдер, не мог бы ты сказать какие ошибки могут быть, я был бы очень благодарен
Сделал все 1 в 1 по гайду и все получилось, но возникло 2 проблемы. 1) Шейпы, которые должны листаться, достаточно широкие. И по итогу в декстоп слайдере они получаются наполовину обрезанными 2) В мобильной версии все хорошо, однако текст выглядит очень странно, не как в адаптиве. Он буквально по буквам переносится на разные строки и выглядит ужасно. Подскажите пожалуйста, что с этим делать
попробуйте создать отдельный блок Т123, поместить его внизу сайта и туда этот код поместить, чтобы исправить текст: .t-rec { word-break: normal !important; }
А если нужно чтобы остальные карточки было видно (выходять за проеделы экрана) Как тогда быть? чтобы не скролить сраз2 2 карточки а по одной и остальные видно справа
блин, пользуюсь твоим гайдом, спасибо огромное. Но адаптив всегда каким-то кривым получается, я уже не одно кресло сжег под собой из-за работы этого скрипта. Почему в адаптиве обрезается контейнер слайдера, не понимаю. Контейнер в главном блоке такой, какой размер высоты в блоке слайдера, но он обрезается непонятно почему :( upd: еще проблема в центрировании объектов. у меня слайд состоит из картинки, текста, заголовка к тексту и подзаголовка. все в windows container, все отцентровано относительно друг друга, но в публикации все в разнобой. приходится делать текста и картинку врастопырку, чтобы попасть в правильное отображение. в частности в адаптиве, по оси y что-то сдвинуть левее, что-то сдвинуть правее, чтобы на самом сайте все смотрелось ровно. дебилиииизм, я просто не могу((
Привет! Спасибо за комментарий! Обрезается скорее всего из-за того, что в коде забиты одни размеры шейпа (для пк-версии), а в мобильной версии они уже другие. Поэтому тут либо ещё один код с другими размерами шейпа сделать, либо посмотри вариант адаптива, про который я рассказывал в закрепленном комментарии)
Про центрирование: абсолютно все объекты должны быть одинаково отцентрованы по window container, как в видео. Да, там придется чуть сместить вбок, чтобы ровно было. Но у меня на видео видно, что все окей на опубликованной версии потом)
@@MaxKlimkov Создай с нуля лендинг адаптив под мобилку, очень востребованная тема сейчас. На тему архитектурного проектирования(проектная организация) Сделаешь?
ОТВЕТ ПРО АДАПТАЦИЮ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА
В мобильной версии не поместится вместить две, три и более карточек. Поэтому 2 варианта:
1. Растянуть шейп вертикально и делать карточки внутри него тоже вертикально друг за другом. Все должно работать, как на ПК. Просто слайдер станет вертикальным и длинным.
2. Сделать горизонтально, чтобы карточки выходили за край устройства. И затем добавить горизонтальный скролл. Таким образом карточки будут листаться на мобильном пальцем горизонтально. Пример, как это может выглядеть на одном из моих сайтов - linkparty.ru
А сам код для горизонтального скролла - romanyu.ru/skroll-s-uderzhaniem-knopki-myshi
Важно, чтобы не конфликтовал код, сделать два блока. Один слайдер для ПК с отображением 1200рх и до бесконечности с кодом из моего видео, а второй до 1200рх и с горизонтальным скроллом
___________________________________
Если Вы хотите сделать несколько таких слайдеров на одной странице, то не забудьте поменять в новом коде: класс шейпа, ID слайдов, ссылки на стрелки (например, «#slider_left1» и «#slider_right2»), а также ОБЯЗАТЕЛЬНО класс «tildoshnaya-slider-owl» смените на какой-нибудь другой (например, «tildoshnaya-slider-owl1»)
___________________________________
Инструкция в текстовом формате + html-код - maxklimkov.ru/blog/tpost/peakgkvho1-kak-sdelat-slaider-na-tilde-iz-zero-blok
___________________________________
Мой сайт с портфолио - maxklimkov.ru
Instagram - instagram.com/klimkovmax
Telegram - t.me/MaxKlimkov
Вконтакте - vk.com/klimkovmax
большое спасибо!
Максим, ты крут
То есть карточки располагать в том же блоке, где шейп?
@@user-yy7pf4id5w карточки делаются в отдельном зеро-блоке, а потом с помощью кода вставляются в шейп
Это круто! Спасибо)
Но у меня, когда я сделал отдельный блок уже с горизонтальным скроллом (для мобильной версии при использовании кода, что в описание) при пролистывание идет смена фона, т.е. виден сам фон блока темнее, а те карточки, что не в зоне блока у них фон менее насыщен... И тем самым видна граница стыковка цвета
В чем может быть проблема? Подскажите, пожалуйста))
Это самое крутое видео в этой тематике из всех, что я видела! Спасибо огромное за твой труд! Срочно требую продолжение темы 😍
Спасибо большое!
Очень полезный урок!) Такую информацию тяжело найти, а тут все в одном ролике. Лайк, подписка!)
Спасибо!
Спасибо огромное! Я потратил несколько дней, чтоб найти данное видео и сделать дизайн по изначальной задумке) Выручил прям
Спасибо за комментарий! Очень рад, что помог)
чуть было не опустила руки и не распрощалась с идеей, но тут попалось это видео. Кратко и по-существу. Супер, спасибо!
Ты просто красавчик!!! Очень полезное видео!!! Прям находка ) Спасибо тебе большое!!!!
Удачи и успехов во всем!!!
Спасибо большое! Очень приятно! Взаимно)
Спасибо, полезное видео.
Благодаря ему закрыл несколько собственных вопросов. Вроде и слайдер такой не нужен, но залип с просмотром, так как теперь стал понятен принцип работы.
Спасибо)
То, что надо!!! Спасибо огромное 🤩 ничего подобного не видела, а с тобой всё получилось!!👍
Рад, что помог! Спасибо за комментарий
Лайка, подписка! Пили пили, контент! Я как граф диз. сейчас активно ищу инфу по тильде в зеро, на ютубе мало такого. Сейчас самое время что бы влететь! Буду рекомендовать твой канал и блог друзьям. Красава.
Спасибо! Буду стараться. Если есть идеи или пожелания для видео - отпишись)
Как же вы мне сильно помогли!)))
Хотелось реализовать интересную идею в зеро блоке для заказчика и в вашем видео я нашла именно то, что искала
Все работает
Спасибо огромное))))))))))
А вам спасибо большое за комментарий!)
Спасибо тебе добрый человек!!!! Уже отчаялась и думала менять дизайн, а тут это видео. Самое доступное объяснение! Подписываюсь!
Рад, что помог!)
Ооооочень крутой мод! Благодарю. Пожалуй самое крутое видео на тему слайдера в нулевом блоке. Спасибо за видео!!! 🔥🔥🔥
Спасибо большое)
Спасибо большое за урок, как раз искал данную информацию, Максим респект 😎🤘
Спасибо большое!)
Спасибо большое за это видео! Очень помог, Макс 👍🏻 На твоем сайте с инструкцией прочитала информацию по поводу автоматической прокрутки слайдов - это то, что мне нужно было! Правда, когда я вставляла этот код для прокрутки после абзаца с адаптивностью, то у меня слетал весь слайдер. Я немного посмотрела, подумала и попробовала вставить код для прокрутки наоборот ВЫШЕ абзаца с адаптивностью и после этого все заработало: и сам слайдер, и автоматическое прокручивание слайдов! Одним словом, круть, подписалась на канал 😁
Спасибо большое за комментарий. Поправлю на сайте
Максим, спасибо огромное!! очень полезное видео. Сначала не получилось. Ребятки, у кого не получается проверьте все КАВЫЧКИ в коде, у меня не хватало закрывающей кавычки )))
Рад, что помог! У меня где-то в коде нет? Напишите, пожалуйста, я поправлю)
@@MaxKlimkov у вас не знаю))) скорее всего я сама посеяла.
Ещё больше полезных видосов!
А ещё, в блоках с карточками, в настройках изображений (если таковые есть), так же надо ставить Lazyload Off.
Красавчик)) Теперь все заработало как надо))
Если у кого-то не показывает больше трёх слайдов, то надо выключить данную опцию и заработает
Все четко, понятно, последовательно.
Спасибо!
Спасибо огромное, очень помогли!
Рад помочь)
Там ещё в скрипте можно включить-отключить зацикливание прокрутки и точки-контроллы. Так же можно закомментить путь до CSS-ок, которые находятся на cloudflare, и в Тильде вставить содержимое этих CSS-ок, внеся правки, изменив в них, например, цвет и размер точек-контроллов.
Подскажите, пожалуйста, подробнее, как это можно сделать
Спасибо большое! Все получилось)
Рад, что помог)
у меня всё получилось с первого раза, спасибо тебе огромное, крутой контент!
Рад, что все получилось! Спасибо за комментарий)
@@MaxKlimkov Только теперь не могу понять как это адаптировать под мобилку, у тебя случайно нет видео или инструкции на эту тему?😅
@@polina6598 в закреплённом комментарии
Спасибо. Очень доступно объяснили! 😄
Пожалуйста)
Спасибо за помощь!
Очень круто!!!
Спасибо!
Спасибо, очень помогли, ну а я в свою очередь помогу комментом и лайком!
Благодарю. Рад, что помог!
Максим, спасибо огромное! Просто чудеса!!))) Конструктор сам работает, вот наполню контентом и надеюсь всё так же будет работать) У меня один вопрос: нужно листать слайды влево, вправо листаются когда уже влево отмотал, а привычнее всем листать слева направо - это как-то изменить? Если нет, переживём, конечно, просто интересно. Спасибо!
Спасибо большое за комментарий)
А вы точно правильно стрелкам проставили ссылки? Для правой c right, для левой - c left)
@@MaxKlimkov да, перепроверила)
Спасибо большое за ваш труд👍😎
Просто бэст. Спасибо, это очень полезно и понятно
Спасибо все получилось)
Молодчага
Благодарю!)
Спасибо помогло!
Спасиибо!!
У меня возникают проблемы с адаптацией
Спасибо большое!
Спасибо огромное! всё работает)
делал всё четко по как на видео, но почему-то после публикации блоки со слайдами остаются на своих местах, а сам слайдер пустой
Cпасибо за видео . Есть проблема: 9:42 на 3 слайде и дальше уже картинки не грузятся
Почему-то у меня ничего не работает;((((
Дуже корисне відео👏 дякую
Пожалуйста)
Макс, спасибо за крутое видео! Подскажи пожалуйста, обязательно ли делать адаптацию перед вставкой кода?
Пожалуйста!)
Не обязательно. Но про адаптацию под мобильные я писал в закреплено комментарии,как лучше сделать)
Анимация "block\element on screen", установленная на объекты блоков, которые будут крутиться в слайдере, начинает работать сразу, как только блок со слайдером появится на экране. Как бы сделать так, чтобы эта анимация начинала отрабатывать по мере пролистывания?
Здравствуйте! оч крутой гайд, все работает отлично, спасибо!
Если можно, то прошу дополнить его кодом на срабатывание слайдера при наведении мыши на шейп. Заранее благодарю!
Кто-нибудь знает, от чего при добавлении этого кода на страницу перестаёт работать SBS анимация? 🤔
*оказалось, это распространённая проблема и её вызывает значение true у параметра loop. Фиговый код... Жалко 😒
В стилях тильдошной указано: "Указываем высоту слайда" и "Указываем ширину слайда", а не всего слайдера.
Боже, как мне помогло это видео, спасибо! А есть ли возможность реализовать таким же образом вертикальный слайдер ?
Очень рад, что выручил)
Шейп можно делать вертикальным, а если вы про то, чтобы они снизу вверх скроллились, то это нужно другой скрипт искать)
Добрый день! Спасибо за полезное и понятное видео!) Все замечательно работает, но хотелось бы добавить автоматическое перелистывание слайдов. Прочитала ваше примечание в текстовой инструкции и добавила код, слайдер перестал работать совсем( Убираю дополнительный код - все работает, добавляю - ломается. Подскажите, пожалуйста, что может быть с ним не так, в чем ошибка? Очень нужно сделать автоматическое перелистывание!
Добрый день. пришлите весь ваш код вместе с дополнительным пролистыванием мне в телеграм
@@MaxKlimkov у меня такая же проблема
проблема решена перемещением строчек автоплэй под loop
не понимаю, как сделать адаптив из пункта 1? если в мобильной версии шейп растягиваем в длину, то он ведь обрезается, потому что в коде указывали фиксированную высоту...
Очень полезное и понятное видео, большое спасибо)))
Единственный вопрос остался про адаптацию. Что именно нужно прописать в коде внутри скобок, в пункте адаптивность?
Адаптивность можно сделать по другому, так как две карточки не поместятся на телефоне. Посмотрите комментарии, я там отвечал на подробный вопрос)
Привет! Все делала по инструкции, перепроверила все по Виндоу контейнеру, а слайды в шейп не подгрузились, идут отдельными блоками( в основном блоке на фон подгружена картинка как заливка блока
НЕ понимаю почему, но у меня не получилось. Отдельно публикуется блок со слайдером и блоки с элементами. Где может быть ошибка? подскажите пожалуйста
Перепроверьте код. Скопируйте и заново вставьте. Возможно, где-то нечаянно удалили скобку
Здравствуйте, спасибо за урок, получилось сделать переключение слайдеров, но появилась проблема. На основном блоке у меня есть подложка из картинки, на блоках с карточками я сделала фон без цвета, но когда открываешь сайт, там контейнер стал белым, как бы не настраивала, не могу убрать. Подскажите, пожалуйста, в чем может быть проблема, или как исправить?
Максим, подскажите какой браузер использовался для просмотра кода страницы? )
Opera GX
@@MaxKlimkov Большое Вам спасибо - всё получилось )
@@veruniks Рад помочь)
Подскажите пожалуйста как адаптировать версию для мобильных устройств?
Так же как и любой другой контент.
Все отлично получилось, но! я сделала один слайдер, он работает, сделала рядом второй, не работает. Карточки листаются, но плывут по всему экрану. проверила код уже раз 20, переделала заново, все точно также. Что делать? не могу найти информацию как сделать 2 слайдера в одном блоке.
В закреплённом комментарии я писал, если хотите сделать 2+ слайдеров)
Очень круто! у меня все получилось! Только вопрос есть один вопрос. У меня шейп не белый, я его залила нужным цветом (зеленый), но внутри карточки другого цвета (белые) и почему-то именно текст у меня на этих карточках остался на зеленом фоне. То есть поучается, что текст карточки на щеленом фоне, а сама карточка белая, выглядит странно..Фон текста карточки не могу перезалить, хотя в редакторе отображается, что карточки и текст на белом фоне..Не знаете, как это можно изменить? :-)
Спасибо большое)
А Шейп не нужно заливать. Нужно убрать у него заливку, чтобы он стал прозрачным. А фон блока можно в настройках самого блока регулировать)
@@MaxKlimkov вот класс! все получилось! спасибо большое!
Привет, а есть ли вариант сделать так, что бы карточки слайдера выходили за его границы? Нужно наверное что то с .overflow попробовать, но у меня не очень получается... Вообще ноль реакции
Привет!
Можно изменить размер шейпа, в котором эти карточки, например
А если надо, чтобы карточки располагались горизонтально и уходи за экран, то можно попробовать использовать эту модификацию - romanyu.ru/skroll-strelki
@@MaxKlimkov Да, спасибо ) Я тоже его вчера ночью нашёл, всё отлично работает. Жаль с этим кодом пока нет вариантов сделать так же, был бы универсальным
Привет, возможно ли как то сделать чтобы когда я делал слайдер не "бесконечным" в крайнем положении пропадала одна из стрелок?
Привет. К сожалению, такое не подскажу)
Спасибо за урок, очень помогло! У меня вопрос: можно ли как-то сделать отображение номера слайда вроде "1/5"? Кучу информации перерыла - ответ именно для тильды не нашла, а навыков программирования не хватает, чтобы разобраться.
Только если на самих картинках пометить
@@MaxKlimkov спасибо, видимо придётся как-то так выкручиваться
Всё работает кроме кнопок. Как только нажимаю на кнопку, слайдер пролистывается и сразу исчезает (сделала это в поп апе). Почему кнопка может закрыть поп-ап?(
Привет, классное видео, правда я косячнул, сделал его таким образом что под мобилку его не адаптировать) Придется по одной карточке делать, а не по три, как я хотел. А карточек 19 шт. Но проблема в том, что тогда в 1200 слайдер в 1 карточку будет выглядеть очень маленьким по ширине. В таком случае что бы в 1200 слайдер был в три карточки а в мобилке в одну, надо будет делать два слайдера? Или есть способ сделать это с помощью одного?
Привет! Спасибо!)
Я бы делал для компьютерной версии, как нужно - три карточки в одном слайде. Только главное, чтобы они не были слишком маленькие и хорошо воспринимались. Но на компьютере должно быть окей)
А вот на устройствах поменьше три карточки в любом случае не поместятся в один экран. Соответственно, либо делать их вертикально, либо сделать горизонтально, чтобы они выходили за край устройства. И затем добавить горизонтальный скролл. Таким образом карточки будут листаться на мобильном пальцем горизонтально. Пример, как это может выглядеть на одном из моих сайтов - linkparty.ru
А сам код для горизонтального скролла - romanyu.ru/skroll-s-uderzhaniem-knopki-myshi
Важно, чтобы не конфликтовал код сделать два блока. Один слайдер для ПК (1200рх и до бесконечности) с кодом из моего видео, а второй до 1200рх и с горизонтальным скролом
@@MaxKlimkov Господи спасибо что ты есть)
@@user-ir6ww2of1b аминь!)
@@MaxKlimkov я сделал как ты посоветовал и все получилось, могу скинуть тебе если интересно)
@@user-ir6ww2of1b присылай)
Привет, спасибо за видео! А можно ли как-то отрегулироваться скорость автоматического переключения слайдов? И есть ли возможность отключения автоматического перелистывания?
Привет!
Найдите в коде строчку "nav:false,". Ниже напишите следующие строчки с новых абзацев через запятую:
autoplay: true,
autoplayTimeout: 5000,
Первая включает автоматическое переключение, а вторая задает задержку слайда в миллисекундах. Вы это имели ввиду под скоростью переключения?
@@MaxKlimkov еее, спасибо. Да, именно это)
@@MaxKlimkov Попробовал, как то странно работает) autoplayTimeout если ставлю низкое значение, что бы быстро переключало слайды - работает. А если высокое (что бы слайды дольше не переключались) - то не работает, всё равно переключает так же быстро, как и без этого параметра в коде.
А "autoplay: false," - вообще не заработал, всё равно переключает слайды) я хз, может я что-то не так делаю
@@VladPl-n7o напишите мне в телеграме @MaxKlimkov
Max, подскажи пожалуйста, что нужно добавить в код чтобы сделать навигацию по Url Hash owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html
Привет! Конкретно по этому коду не подскажу, так как обычно меняю готовые решения, сделанные под тильду (например, беру код из сайта mo-ti.ru ). Но можно сделать очень похожую анимацию через этот код (romanyu.ru/skroll-strelki ). Также делаете карточки в ряд на зеро-блоке, вставляете код по инструкции из ссылки. А чтобы карточки при пролистывании скрывались, можно сделать слева от них прямоугольник (шейп) под цвет фона. То есть они будут уезжать при пролистывании под этот шейп. Очень минималистичный и некрасивый пример сделал, но все же видно как работает:) - maxklimkov.ru/page20398924.html
Спасибо за видео! У меня работают все экраны, кроме мобильного 320. На нем едет весь текст, он сливается так, что слово само переносится по частям на следующую строчку (даже одна последняя буква типа "налога-м"). Подскажите, пожалуйста, почему такое может быть?
Если именно слова странно переносятся, то попробуйте создать отдельный блок Т123, поместить его внизу сайта и туда этот код поместить:
.t-rec {
word-break: normal !important;
}
@@MaxKlimkov вы лучший, спасибо!! Все заработало 😍
@@oksanasherbi рад был помочь! ☺️
Привет, фото из слайдов рандомно пропадают. Не знаю, в чём дело :(
Привет! А слайдер один на сайте?
У картинок ставьте LAZYLOAD в положение OFF.
Так, первый раз все получилось отлично! Решила реализовать эту идею снова, уже для другого сайта и там в карточке еще видео должно быть. Не работает. Все встает криво/косо. Делала по инструкции, не пойму, это из-за видео такой лаг?
При пролистывании первого слайда назад появляется пустой слайд, затем последний. Как убрать пустой слайд?
тож самое,
+ не появляются 2 последних слайда. В коде что-то не так, не могу найти
Большое спасибо за видео! Очень помогло, но столкнулась с проблемой: у меня слайдер из картинок (перелистываются по очереди 5 картинок). То есть в мобилке все норм помещается и нет смысла делать другие блоки. Когда загрузила код - на десктопе все супер работает и переключается кнопками, а вот в мобилке -кнопки есть, но не реагируют и не переключают слайды (картинки). Картинки перелистываются свайпом (это прикольно, но мне бы кнопками сделать)...
подскажите, пожалуйста, как можно пофиксить, чтобы кнопки на мобилке работали тоже(((
Здравствуйте. Столкнулась с проблемой, что этот код тормозит анимацию в других блоках. Отключаю код и анимация работает как надо... Можно ли это исправить?
А в чём м.б причина: у меня на ноуте и у некоторых других информация в слайдере отображается ровно, а у некоторых съезжает? Спасибо!
Возможно, поставили неверное отображение. Например, по grid container, а не window
Зеро блоки слайдера по windows. Элементы внутри нет
Всё перепроверила: слайд не становится в шэйп в основном блоке😵 да что ж такое-то...
Мой косяк😖Спасибо огромное за обратную связь!! Ты супер! Удачи тебе во всем!!!
Есть возможность добавить картинку на фон?
На фон всего блока имеете ввиду? Конечно. В основном блоке (где прозрачный Шейп) добавляете картинку и делаете ей 100% по высоте и ширине по window container (именно в процентах). И ставите на задний план
Или можно просто загрузить фоном через кнопку в настройках зеро-блока
Видео супер, спасибо большое. А не подскажите, как вместо стрелок сделать круги контролеры в конце слайдера?
Спасибо за комментарий. Если вы про пагинацию в виде точек, то, к сожалению, такого к этому слайдеру не сделать
@@MaxKlimkov да, пагинацию. Поняла, спасибо большое.
Здравствуйте! Подскажите, пожалуйста, сталкивались ли вы с такой проблемой:
Когда вставляем png картинку как один из слайдов - то фон замывается весь. Никак не получается органично вставить этот слайдер в проект. Можно ли как-то убрать это размытие? Уже всё параметры перещелкал. Возможно, что-то просмотрел((
Не забыли lazy load отключить?
@@MaxKlimkov всй проверял)) прошёлся несколько раз по каждому пункту) так ничего и не помогло) в итоге пришлось сменить код)
ПОМОГИТЕ 🙏🏻
Сама инструкция очень крутая! У меня всё получилось сделать. Я делала полноэкранный слайдер.
НО в мобильной версии у меня контент съехал слево, хотя везде шейпы выровнены в мобильной версии. Помогите, пожалуйста
Ситуация такая: по инструкции у меня получилось делать слайдер, но есть одна проблема. На самих карточках у меня были кнопки, при нажатии на которую, ты переходишь на другую страницу. И кнопки были с пошаговой анимацией при наведении. Сейчас в слайдер они не работают вообще. Такое ощущение, что просто картинки листаю (как в галерее). Что делать, помогите :(
у меня получилось, но в zero дизайн , который есть не перенесся , картинки не выгружаются и тект не такой
Прикольно. А для мобильной версии даже кнопки не нужны. Крутит карточки по свайпу.
Да, верно)
Спасибо а есть возможность сделать прокрутку автоматической?
Добрый день. Попробуйте вставить этот код в тег /script
function auto_play() { $("[href='#slider_right']").click()};
var timemode = 2000;
var autoPlay = setInterval( auto_play, timemode )
Как добавить загругленные картинки?
Добавить Шейп, в настройках шейпа сделать его кругом. Далее загрузить в Шейп картинку
Спасибо, все получилось! Подскажите пожалуйста, как сделать автопрокрутку? Увидел ниже комент, вы предложили добавить код /script, но как это делать не очень понимаю - куда именно его там вклеить надо?
Посмотрите внимательнее, там есть скриншот с примером)
@@MaxKlimkov Максим, нашел спасибо. Вы бы не могли скинуть полностью этот код сюда, а то что-то когда я его вставляю, слайдер просто пропадает. Возможно отступы как-то не правильно вставляю?
А как сделать так, чтобы слайды перелистывались плавно с эффектом исчезновения, а не так резко? помогите пожалуйста🙏
qna.habr.com/q/353498
Спасибо, слайдер очень хорошо влился в проект) но есть проблема с фоновыми элементами( Блок покрашен в черный, на фоне красные пятна, к сожалению пятна перекрывает слайдер (тоже черного цвета) хотя заливку я убирала. В чем может быть проблема?
Спасибо за комментарий!
Проверьте в слоях, чтобы пятна были под всеми элементами. Если не помогает, то кодом с помощью параметра z-index можно сделать, чтобы пятна ушли на задний план. Или вариант сделать картинку (черный фон с пятнами) и ее залить, как фон
Добрый день! Подскажите, пожалуйста, как сделать, чтобы контент располагался по всему шейпу, а не только в его правой части?
Добрый день. Нашли ответ? столкнулся с той же проблемой
Может ли кто-то подсказать, возможно ли сделать сам шейп, в котором лежат карточки, залитым полупрозрачным цветом + с эффектом размытия?
Можно просто создать ещё один Шейп под низ главного шейпа и размыть в настройках зеро-блока. Получится пятно на фоне
@@MaxKlimkov пробовала, но почему-то главный шейп словно перекрывает второстепенный шейп и даёт белый цвет, карточки у меня тоже с удалённым фоном, если это вдруг имеет значение
а на моб версии это тоже так работать будет?
Работать - да, но удобно ли? В мобильной уже не поместится две карточки рядом, поэтому либо их располагать вертикально одну за одной, но не удобно тогда листать, либо делать их все горизонтально и добавить код для горизонтального скролла. Например, этот - romanyu.ru/skroll-s-uderzhaniem-knopki-myshi
очень крутое видео, спасибо за полезный контент☺!!слайдер работает, только возникла проблемка, в слайдах я скруглила углы у шейпа-плашки, и при отображении слайдера эти углы заливаются серым, хотя заливки на фоне нет, почему не сохраняется прозрачность? не знаю как быть🥲
Проверьте, чтобы НЕ был залит фон в зеро-блоках (внутри), а также в их настройках)
Зравствуйте, пожалуйста, подкажите почему когда все сделал как надо половина экран контента обрезается?
Возможно, в коде неверно выставили размера шейпа. Или Шейп меньше, чем ширина слайдов
@@MaxKlimkov размер шейпа 1920 на 1080, в коде тоже пишу это
@@MaxKlimkov размеры абсолютно идентичные
не пойму где у меня ошибка и почему не работает , сделал абсолютно все также
спасибо огромное! У меня вопрос про адаптивность. все настроила как указанно в видео, в адаптивах все в левом верхнем углу, макеты подровняла по высоте карточек. но, когда с телефона захожу, галерея смещается в лево, хотелось бы ее по центру видеть, как это исправить?
Да, может быть такая проблема из-за того, что выравнивание именно по window container идёт. Поэтому тут вручную подбирать, двигать наоборот вправо
Либо воспользуйтесь методом, который я предложил, в закреплено комментарии. Сделать горизонтальным скроллом
@@MaxKlimkov спасибо за ответ!
проблема с фоном, он размывается, блюр везде убран, цвет фона в зероблоках убран, но картинка на фоне в основном блоке размывается шейпом слайдера, я уже не знаю как это пофикстить, помогите
Забыли скорее всего убрать lazy-load
Как сделать автоматическую смену слайдов?
А как сделать слайдер со свайпом а не с кнопками?
Добрый день, подскажите выравнивание сделала в настройках, но все равно текст и шейп съехали влево и кнопки не кликабельные
Значит, наверное, сделали выравнивание не по window container, а по grid container
@@MaxKlimkov Cпасибо, я разобралась!!) Но другая проблема, у меня шейп(который прозрачный), при публикации сайта отображает фото, которое у меня загружено на фоне самого блока, как можно исправить?)
на фоне ничего не должно быть)
@@user-de5th9gw8u
А можно сделать такой слайдер над видеофоном?
Да, можно)
@@MaxKlimkov Я несколько раз точно по инструкции сделал, но у меня не работает слайдер, не мог бы ты сказать какие ошибки могут быть, я был бы очень благодарен
@@ibedil6208 да, могу посмотреть код. Напишите в телеграм)
Сделал все 1 в 1 по гайду и все получилось, но возникло 2 проблемы.
1) Шейпы, которые должны листаться, достаточно широкие. И по итогу в декстоп слайдере они получаются наполовину обрезанными
2) В мобильной версии все хорошо, однако текст выглядит очень странно, не как в адаптиве. Он буквально по буквам переносится на разные строки и выглядит ужасно.
Подскажите пожалуйста, что с этим делать
попробуйте создать отдельный блок Т123, поместить его внизу сайта и туда этот код поместить, чтобы исправить текст:
.t-rec {
word-break: normal !important;
}
А если нужно чтобы остальные карточки было видно (выходять за проеделы экрана) Как тогда быть? чтобы не скролить сраз2 2 карточки а по одной и остальные видно справа
Тогда поможет вариант из закреплённого комментария про адаптивную вёрстку. Только использовать для ПК
блин, пользуюсь твоим гайдом, спасибо огромное. Но адаптив всегда каким-то кривым получается, я уже не одно кресло сжег под собой из-за работы этого скрипта.
Почему в адаптиве обрезается контейнер слайдера, не понимаю. Контейнер в главном блоке такой, какой размер высоты в блоке слайдера, но он обрезается непонятно почему :(
upd: еще проблема в центрировании объектов. у меня слайд состоит из картинки, текста, заголовка к тексту и подзаголовка. все в windows container, все отцентровано относительно друг друга, но в публикации все в разнобой. приходится делать текста и картинку врастопырку, чтобы попасть в правильное отображение. в частности в адаптиве, по оси y что-то сдвинуть левее, что-то сдвинуть правее, чтобы на самом сайте все смотрелось ровно. дебилиииизм, я просто не могу((
Привет! Спасибо за комментарий!
Обрезается скорее всего из-за того, что в коде забиты одни размеры шейпа (для пк-версии), а в мобильной версии они уже другие. Поэтому тут либо ещё один код с другими размерами шейпа сделать, либо посмотри вариант адаптива, про который я рассказывал в закрепленном комментарии)
Про центрирование: абсолютно все объекты должны быть одинаково отцентрованы по window container, как в видео. Да, там придется чуть сместить вбок, чтобы ровно было. Но у меня на видео видно, что все окей на опубликованной версии потом)
Когда новые видео?
Сложно что-то новое придумывать, поэтому видео редко)
Может быть подскажите тему?)
@@MaxKlimkov Создай с нуля лендинг адаптив под мобилку, очень востребованная тема сейчас. На тему архитектурного проектирования(проектная организация) Сделаешь?
@@solodolo3881 сверстать сайт по какому-нибудь макету и показать как адаптировать? Если это действительно интересно, то без проблем!)
@@MaxKlimkov +
Всё по гайду, но не работает(( Не пойму причину
После 6 слайдера последующие не отображаются. Кто-нибудь сталкивался?