Как сделать НЕ полноэкранный слайдер из зеро-блоков на Тильде (Tilda)

[@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

[@sofico_mt]

большое спасибо!

[@aecho5955]

Максим, ты крут

[@КатяТригуб-х1к]

То есть карточки располагать в том же блоке, где шейп?

[@MaxKlimkov]

@@КатяТригуб-х1к карточки делаются в отдельном зеро-блоке, а потом с помощью кода вставляются в шейп

[@дмитрийкалинин-в5п]

Это круто! Спасибо) Но у меня, когда я сделал отдельный блок уже с горизонтальным скроллом (для мобильной версии при использовании кода, что в описание) при пролистывание идет смена фона, т.е. виден сам фон блока темнее, а те карточки, что не в зоне блока у них фон менее насыщен... И тем самым видна граница стыковка цвета В чем может быть проблема? Подскажите, пожалуйста))

[@ninabatc4783]

Это самое крутое видео в этой тематике из всех, что я видела! Спасибо огромное за твой труд! Срочно требую продолжение темы 😍

[@MaxKlimkov]

Спасибо большое!

[@KliMikh]

Очень полезный урок!) Такую информацию тяжело найти, а тут все в одном ролике. Лайк, подписка!)

[@MaxKlimkov]

Спасибо!

[@Marevo13]

чуть было не опустила руки и не распрощалась с идеей, но тут попалось это видео. Кратко и по-существу. Супер, спасибо!

[@eddiesparks5055]

Спасибо огромное! Я потратил несколько дней, чтоб найти данное видео и сделать дизайн по изначальной задумке) Выручил прям

[@MaxKlimkov]

Спасибо за комментарий! Очень рад, что помог)

[@Dontgoagainstthedream]

Ты просто красавчик!!! Очень полезное видео!!! Прям находка ) Спасибо тебе большое!!!! Удачи и успехов во всем!!!

[@MaxKlimkov]

Спасибо большое! Очень приятно! Взаимно)

[@IgorevichArtem]

Спасибо, полезное видео. Благодаря ему закрыл несколько собственных вопросов. Вроде и слайдер такой не нужен, но залип с просмотром, так как теперь стал понятен принцип работы.

[@MaxKlimkov]

Спасибо)

[@mikakhassenova8352]

Спасибо тебе добрый человек!!!! Уже отчаялась и думала менять дизайн, а тут это видео. Самое доступное объяснение! Подписываюсь!

[@MaxKlimkov]

Рад, что помог!)

[@VeraSadko]

То, что надо!!! Спасибо огромное 🤩 ничего подобного не видела, а с тобой всё получилось!!👍

[@MaxKlimkov]

Рад, что помог! Спасибо за комментарий

[@mariakash4073]

Как же вы мне сильно помогли!))) Хотелось реализовать интересную идею в зеро блоке для заказчика и в вашем видео я нашла именно то, что искала Все работает Спасибо огромное))))))))))

[@MaxKlimkov]

А вам спасибо большое за комментарий!)

[@elnurserikson9521]

Ооооочень крутой мод! Благодарю. Пожалуй самое крутое видео на тему слайдера в нулевом блоке. Спасибо за видео!!! 🔥🔥🔥

[@MaxKlimkov]

Спасибо большое)

[@ihorzhuk4949]

Лайка, подписка! Пили пили, контент! Я как граф диз. сейчас активно ищу инфу по тильде в зеро, на ютубе мало такого. Сейчас самое время что бы влететь! Буду рекомендовать твой канал и блог друзьям. Красава.

[@MaxKlimkov]

Спасибо! Буду стараться. Если есть идеи или пожелания для видео - отпишись)

[@yaklevaia]

Максим, спасибо огромное!! очень полезное видео. Сначала не получилось. Ребятки, у кого не получается проверьте все КАВЫЧКИ в коде, у меня не хватало закрывающей кавычки )))

[@MaxKlimkov]

Рад, что помог! У меня где-то в коде нет? Напишите, пожалуйста, я поправлю)

[@yaklevaia]

@@MaxKlimkov у вас не знаю))) скорее всего я сама посеяла.

[@Loony666Noob]

Спасибо большое за урок, как раз искал данную информацию, Максим респект 😎🤘

[@MaxKlimkov]

Спасибо большое!)

[@heykkum]

Спасибо большое за это видео! Очень помог, Макс 👍🏻 На твоем сайте с инструкцией прочитала информацию по поводу автоматической прокрутки слайдов - это то, что мне нужно было! Правда, когда я вставляла этот код для прокрутки после абзаца с адаптивностью, то у меня слетал весь слайдер. Я немного посмотрела, подумала и попробовала вставить код для прокрутки наоборот ВЫШЕ абзаца с адаптивностью и после этого все заработало: и сам слайдер, и автоматическое прокручивание слайдов! Одним словом, круть, подписалась на канал 😁

[@MaxKlimkov]

Спасибо большое за комментарий. Поправлю на сайте

[@людмилак-т4з]

Все четко, понятно, последовательно.

[@MaxKlimkov]

Спасибо!

[@3t.ON-drums]

Ещё больше полезных видосов!

[@АндрейЛенченко-ф1ч]

Спасибо за помощь!

[@ДашаЩ-ч6ц]

Спасибо большое! Все получилось)

[@MaxKlimkov]

Рад, что помог)

[@annbenety1522]

Спасибо. Очень доступно объяснили! 😄

[@MaxKlimkov]

Пожалуйста)

[@polina6598]

у меня всё получилось с первого раза, спасибо тебе огромное, крутой контент!

[@MaxKlimkov]

Рад, что все получилось! Спасибо за комментарий)

[@polina6598]

@@MaxKlimkov Только теперь не могу понять как это адаптировать под мобилку, у тебя случайно нет видео или инструкции на эту тему?😅

[@MaxKlimkov]

@@polina6598 в закреплённом комментарии

[@ИванБакастов-х6ж]

А ещё, в блоках с карточками, в настройках изображений (если таковые есть), так же надо ставить Lazyload Off.

[@ПОТОЛКИАТРИКС]

Красавчик)) Теперь все заработало как надо))

[@gorilla54696]

Если у кого-то не показывает больше трёх слайдов, то надо выключить данную опцию и заработает

[@ford160484]

Спасибо большое за ваш труд👍😎

[@annancyro]

Спасибо огромное, очень помогли!

[@MaxKlimkov]

Рад помочь)

[@formatarchit]

делал всё четко по как на видео, но почему-то после публикации блоки со слайдами остаются на своих местах, а сам слайдер пустой

[@maneraxule]

Макс, спасибо за крутое видео! Подскажи пожалуйста, обязательно ли делать адаптацию перед вставкой кода?

[@MaxKlimkov]

Пожалуйста!) Не обязательно. Но про адаптацию под мобильные я писал в закреплено комментарии,как лучше сделать)

[@Квизплиз-т1ю]

Очень круто!!!

[@MaxKlimkov]

Спасибо!

[@SadovPianos]

Просто бэст. Спасибо, это очень полезно и понятно

[@АнастасияШандригол]

Максим, спасибо огромное! Просто чудеса!!))) Конструктор сам работает, вот наполню контентом и надеюсь всё так же будет работать) У меня один вопрос: нужно листать слайды влево, вправо листаются когда уже влево отмотал, а привычнее всем листать слева направо - это как-то изменить? Если нет, переживём, конечно, просто интересно. Спасибо!

[@MaxKlimkov]

Спасибо большое за комментарий) А вы точно правильно стрелкам проставили ссылки? Для правой c right, для левой - c left)

[@АнастасияШандригол]

@@MaxKlimkov да, перепроверила)

[@АнтонПетров-ж7п]

Спасибо, очень помогли, ну а я в свою очередь помогу комментом и лайком!

[@MaxKlimkov]

Благодарю. Рад, что помог!

[@valeriiailiadi1710]

Спасибо большое!

[@g3t_live]

Спасибо огромное! всё работает)

[@ViktorSea]

Спасибо все получилось)

[@svem.d]

Очень полезное и понятное видео, большое спасибо))) Единственный вопрос остался про адаптацию. Что именно нужно прописать в коде внутри скобок, в пункте адаптивность?

[@MaxKlimkov]

Адаптивность можно сделать по другому, так как две карточки не поместятся на телефоне. Посмотрите комментарии, я там отвечал на подробный вопрос)

[@ОльгаОко]

Добрый день! Спасибо за полезное и понятное видео!) Все замечательно работает, но хотелось бы добавить автоматическое перелистывание слайдов. Прочитала ваше примечание в текстовой инструкции и добавила код, слайдер перестал работать совсем( Убираю дополнительный код - все работает, добавляю - ломается. Подскажите, пожалуйста, что может быть с ним не так, в чем ошибка? Очень нужно сделать автоматическое перелистывание!

[@MaxKlimkov]

Добрый день. пришлите весь ваш код вместе с дополнительным пролистыванием мне в телеграм

[@АлексейКлепцов-л8я]

@@MaxKlimkov у меня такая же проблема

[@АлексейКлепцов-л8я]

проблема решена перемещением строчек автоплэй под loop

[@ИванБакастов-х6ж]

Там ещё в скрипте можно включить-отключить зацикливание прокрутки и точки-контроллы. Так же можно закомментить путь до CSS-ок, которые находятся на cloudflare, и в Тильде вставить содержимое этих CSS-ок, внеся правки, изменив в них, например, цвет и размер точек-контроллов.

[@alinabondarenko429]

Подскажите, пожалуйста, подробнее, как это можно сделать

[@3443rfe]

Спасибо помогло!

[@MARKOV_GEKA]

Молодчага

[@MaxKlimkov]

Благодарю!)

[@anastasiabukatkina1086]

Спасиибо!!

[@imprayser5316]

Здравствуйте, спасибо за урок, получилось сделать переключение слайдеров, но появилась проблема. На основном блоке у меня есть подложка из картинки, на блоках с карточками я сделала фон без цвета, но когда открываешь сайт, там контейнер стал белым, как бы не настраивала, не могу убрать. Подскажите, пожалуйста, в чем может быть проблема, или как исправить?

[@АнастасияКамкина-г7г]

Подскажите пожалуйста как адаптировать версию для мобильных устройств?

[@ИванБакастов-х6ж]

Так же как и любой другой контент.

[@krasovkalina]

не понимаю, как сделать адаптив из пункта 1? если в мобильной версии шейп растягиваем в длину, то он ведь обрезается, потому что в коде указывали фиксированную высоту...

[@d.a.r.m.a8979]

Cпасибо за видео . Есть проблема: 9:42 на 3 слайде и дальше уже картинки не грузятся

[@АлексейКлепцов-л8я]

Здравствуйте! оч крутой гайд, все работает отлично, спасибо! Если можно, то прошу дополнить его кодом на срабатывание слайдера при наведении мыши на шейп. Заранее благодарю!

[@myroslavaromanchuk7686]

Дуже корисне відео👏 дякую

[@MaxKlimkov]

Пожалуйста)

[@littleheroes7003]

Привет! Все делала по инструкции, перепроверила все по Виндоу контейнеру, а слайды в шейп не подгрузились, идут отдельными блоками( в основном блоке на фон подгружена картинка как заливка блока

[@drampl1872]

У меня возникают проблемы с адаптацией

[@VladPl-n7o]

Привет, спасибо за видео! А можно ли как-то отрегулироваться скорость автоматического переключения слайдов? И есть ли возможность отключения автоматического перелистывания?

[@MaxKlimkov]

Привет! Найдите в коде строчку "nav:false,". Ниже напишите следующие строчки с новых абзацев через запятую: autoplay: true, autoplayTimeout: 5000, Первая включает автоматическое переключение, а вторая задает задержку слайда в миллисекундах. Вы это имели ввиду под скоростью переключения?

[@VladPl-n7o]

@@MaxKlimkov еее, спасибо. Да, именно это)

[@VladPl-n7o]

@@MaxKlimkov Попробовал, как то странно работает) autoplayTimeout если ставлю низкое значение, что бы быстро переключало слайды - работает. А если высокое (что бы слайды дольше не переключались) - то не работает, всё равно переключает так же быстро, как и без этого параметра в коде. А "autoplay: false," - вообще не заработал, всё равно переключает слайды) я хз, может я что-то не так делаю

[@MaxKlimkov]

@@VladPl-n7o напишите мне в телеграме @MaxKlimkov

[@veruniks]

Максим, подскажите какой браузер использовался для просмотра кода страницы? )

[@MaxKlimkov]

Opera GX

[@veruniks]

@@MaxKlimkov Большое Вам спасибо - всё получилось )

[@MaxKlimkov]

@@veruniks Рад помочь)

[@EugnR]

Кто-нибудь знает, от чего при добавлении этого кода на страницу перестаёт работать SBS анимация? 🤔 *оказалось, это распространённая проблема и её вызывает значение true у параметра loop. Фиговый код... Жалко 😒

[@kpd_zero]

Спасибо за урок, очень помогло! У меня вопрос: можно ли как-то сделать отображение номера слайда вроде "1/5"? Кучу информации перерыла - ответ именно для тильды не нашла, а навыков программирования не хватает, чтобы разобраться.

[@MaxKlimkov]

Только если на самих картинках пометить

[@kpd_zero]

@@MaxKlimkov спасибо, видимо придётся как-то так выкручиваться

[@trupleks6704]

Здравствуйте! Ничего не работает(((

[@Ta-fw1pl]

Видео супер, спасибо большое. А не подскажите, как вместо стрелок сделать круги контролеры в конце слайдера?

[@MaxKlimkov]

Спасибо за комментарий. Если вы про пагинацию в виде точек, то, к сожалению, такого к этому слайдеру не сделать

[@Ta-fw1pl]

@@MaxKlimkov да, пагинацию. Поняла, спасибо большое.

[@focus-real912]

Привет, а есть ли вариант сделать так, что бы карточки слайдера выходили за его границы? Нужно наверное что то с .overflow попробовать, но у меня не очень получается... Вообще ноль реакции

[@MaxKlimkov]

Привет! Можно изменить размер шейпа, в котором эти карточки, например А если надо, чтобы карточки располагались горизонтально и уходи за экран, то можно попробовать использовать эту модификацию - romanyu.ru/skroll-strelki

[@focus-real912]

​@@MaxKlimkov Да, спасибо ) Я тоже его вчера ночью нашёл, всё отлично работает. Жаль с этим кодом пока нет вариантов сделать так же, был бы универсальным

[@anastasiabukatkina1086]

Очень круто! у меня все получилось! Только вопрос есть один вопрос. У меня шейп не белый, я его залила нужным цветом (зеленый), но внутри карточки другого цвета (белые) и почему-то именно текст у меня на этих карточках остался на зеленом фоне. То есть поучается, что текст карточки на щеленом фоне, а сама карточка белая, выглядит странно..Фон текста карточки не могу перезалить, хотя в редакторе отображается, что карточки и текст на белом фоне..Не знаете, как это можно изменить? :-)

[@MaxKlimkov]

Спасибо большое) А Шейп не нужно заливать. Нужно убрать у него заливку, чтобы он стал прозрачным. А фон блока можно в настройках самого блока регулировать)

[@anastasiabukatkina1086]

@@MaxKlimkov вот класс! все получилось! спасибо большое!

[@sashasvaor2554]

Здравствуйте. Столкнулась с проблемой, что этот код тормозит анимацию в других блоках. Отключаю код и анимация работает как надо... Можно ли это исправить?

[@НикитаЗацепин-ы2ю]

Привет, возможно ли как то сделать чтобы когда я делал слайдер не "бесконечным" в крайнем положении пропадала одна из стрелок?

[@MaxKlimkov]

Привет. К сожалению, такое не подскажу)

[@ИванБакастов-х6ж]

Анимация "block\element on screen", установленная на объекты блоков, которые будут крутиться в слайдере, начинает работать сразу, как только блок со слайдером появится на экране. Как бы сделать так, чтобы эта анимация начинала отрабатывать по мере пролистывания?

[@НикитаМайоров-я8и]

Боже, как мне помогло это видео, спасибо! А есть ли возможность реализовать таким же образом вертикальный слайдер ?

[@MaxKlimkov]

Очень рад, что выручил) Шейп можно делать вертикальным, а если вы про то, чтобы они снизу вверх скроллились, то это нужно другой скрипт искать)

[@ВиталийЛысов-э7и]

Привет, классное видео, правда я косячнул, сделал его таким образом что под мобилку его не адаптировать) Придется по одной карточке делать, а не по три, как я хотел. А карточек 19 шт. Но проблема в том, что тогда в 1200 слайдер в 1 карточку будет выглядеть очень маленьким по ширине. В таком случае что бы в 1200 слайдер был в три карточки а в мобилке в одну, надо будет делать два слайдера? Или есть способ сделать это с помощью одного?

[@MaxKlimkov]

Привет! Спасибо!) Я бы делал для компьютерной версии, как нужно - три карточки в одном слайде. Только главное, чтобы они не были слишком маленькие и хорошо воспринимались. Но на компьютере должно быть окей) А вот на устройствах поменьше три карточки в любом случае не поместятся в один экран. Соответственно, либо делать их вертикально, либо сделать горизонтально, чтобы они выходили за край устройства. И затем добавить горизонтальный скролл. Таким образом карточки будут листаться на мобильном пальцем горизонтально. Пример, как это может выглядеть на одном из моих сайтов - linkparty.ru А сам код для горизонтального скролла - romanyu.ru/skroll-s-uderzhaniem-knopki-myshi Важно, чтобы не конфликтовал код сделать два блока. Один слайдер для ПК (1200рх и до бесконечности) с кодом из моего видео, а второй до 1200рх и с горизонтальным скролом

[@ВиталийЛысов-э7и]

@@MaxKlimkov Господи спасибо что ты есть)

[@MaxKlimkov]

@@ВиталийЛысов-э7и аминь!)

[@ВиталийЛысов-э7и]

@@MaxKlimkov я сделал как ты посоветовал и все получилось, могу скинуть тебе если интересно)

[@MaxKlimkov]

@@ВиталийЛысов-э7и присылай)

[@mikakhassenova8352]

Так, первый раз все получилось отлично! Решила реализовать эту идею снова, уже для другого сайта и там в карточке еще видео должно быть. Не работает. Все встает криво/косо. Делала по инструкции, не пойму, это из-за видео такой лаг?

[@Mars-zp8en]

Спасибо, все получилось! Подскажите пожалуйста, как сделать автопрокрутку? Увидел ниже комент, вы предложили добавить код /script, но как это делать не очень понимаю - куда именно его там вклеить надо?

[@MaxKlimkov]

Посмотрите внимательнее, там есть скриншот с примером)

[@Mars-zp8en]

@@MaxKlimkov Максим, нашел спасибо. Вы бы не могли скинуть полностью этот код сюда, а то что-то когда я его вставляю, слайдер просто пропадает. Возможно отступы как-то не правильно вставляю?

[@AnnaKolodkina-z6l]

Большое спасибо за видео! Очень помогло, но столкнулась с проблемой: у меня слайдер из картинок (перелистываются по очереди 5 картинок). То есть в мобилке все норм помещается и нет смысла делать другие блоки. Когда загрузила код - на десктопе все супер работает и переключается кнопками, а вот в мобилке -кнопки есть, но не реагируют и не переключают слайды (картинки). Картинки перелистываются свайпом (это прикольно, но мне бы кнопками сделать)... подскажите, пожалуйста, как можно пофиксить, чтобы кнопки на мобилке работали тоже(((

[@ГлазуноваЛюдмила]

НЕ понимаю почему, но у меня не получилось. Отдельно публикуется блок со слайдером и блоки с элементами. Где может быть ошибка? подскажите пожалуйста

[@MaxKlimkov]

Перепроверьте код. Скопируйте и заново вставьте. Возможно, где-то нечаянно удалили скобку

[@leemour4763]

Спасибо а есть возможность сделать прокрутку автоматической?

[@MaxKlimkov]

Добрый день. Попробуйте вставить этот код в тег /script function auto_play() { $("[href='#slider_right']").click()}; var timemode = 2000; var autoPlay = setInterval( auto_play, timemode )

[@vkhow6954]

Max, подскажи пожалуйста, что нужно добавить в код чтобы сделать навигацию по Url Hash owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html

[@MaxKlimkov]

Привет! Конкретно по этому коду не подскажу, так как обычно меняю готовые решения, сделанные под тильду (например, беру код из сайта mo-ti.ru ). Но можно сделать очень похожую анимацию через этот код (romanyu.ru/skroll-strelki ). Также делаете карточки в ряд на зеро-блоке, вставляете код по инструкции из ссылки. А чтобы карточки при пролистывании скрывались, можно сделать слева от них прямоугольник (шейп) под цвет фона. То есть они будут уезжать при пролистывании под этот шейп. Очень минималистичный и некрасивый пример сделал, но все же видно как работает:) - maxklimkov.ru/page20398924.html

[@АлексейХомиченок-з3щ]

Здравствуйте! Подскажите, пожалуйста, сталкивались ли вы с такой проблемой: Когда вставляем png картинку как один из слайдов - то фон замывается весь. Никак не получается органично вставить этот слайдер в проект. Можно ли как-то убрать это размытие? Уже всё параметры перещелкал. Возможно, что-то просмотрел((

[@MaxKlimkov]

Не забыли lazy load отключить?

[@АлексейХомиченок-з3щ]

@@MaxKlimkov всй проверял)) прошёлся несколько раз по каждому пункту) так ничего и не помогло) в итоге пришлось сменить код)

[@oksanasherbi]

Спасибо за видео! У меня работают все экраны, кроме мобильного 320. На нем едет весь текст, он сливается так, что слово само переносится по частям на следующую строчку (даже одна последняя буква типа "налога-м"). Подскажите, пожалуйста, почему такое может быть?

[@MaxKlimkov]

Если именно слова странно переносятся, то попробуйте создать отдельный блок Т123, поместить его внизу сайта и туда этот код поместить: .t-rec { word-break: normal !important; }

[@oksanasherbi]

@@MaxKlimkov вы лучший, спасибо!! Все заработало 😍

[@MaxKlimkov]

@@oksanasherbi рад был помочь! ☺️

[@АнастасияПозоян]

у меня получилось, но в zero дизайн , который есть не перенесся , картинки не выгружаются и тект не такой

[@nevynosimostbytiya]

Добрый день! Подскажите, пожалуйста, как сделать, чтобы контент располагался по всему шейпу, а не только в его правой части?

[@majoorin]

Добрый день. Нашли ответ? столкнулся с той же проблемой

[@anastasiakovtun8116]

Ситуация такая: по инструкции у меня получилось делать слайдер, но есть одна проблема. На самих карточках у меня были кнопки, при нажатии на которую, ты переходишь на другую страницу. И кнопки были с пошаговой анимацией при наведении. Сейчас в слайдер они не работают вообще. Такое ощущение, что просто картинки листаю (как в галерее). Что делать, помогите :(

[@fatimatemirbulatova2684]

Всё работает кроме кнопок. Как только нажимаю на кнопку, слайдер пролистывается и сразу исчезает (сделала это в поп апе). Почему кнопка может закрыть поп-ап?(

[@lizashapar5705]

Все отлично получилось, но! я сделала один слайдер, он работает, сделала рядом второй, не работает. Карточки листаются, но плывут по всему экрану. проверила код уже раз 20, переделала заново, все точно также. Что делать? не могу найти информацию как сделать 2 слайдера в одном блоке.

[@MaxKlimkov]

В закреплённом комментарии я писал, если хотите сделать 2+ слайдеров)

[@АнастасияШиряева-щ9г]

очень крутое видео, спасибо за полезный контент☺!!слайдер работает, только возникла проблемка, в слайдах я скруглила углы у шейпа-плашки, и при отображении слайдера эти углы заливаются серым, хотя заливки на фоне нет, почему не сохраняется прозрачность? не знаю как быть🥲

[@MaxKlimkov]

Проверьте, чтобы НЕ был залит фон в зеро-блоках (внутри), а также в их настройках)

[@drampl1872]

Есть возможность добавить картинку на фон?

[@MaxKlimkov]

На фон всего блока имеете ввиду? Конечно. В основном блоке (где прозрачный Шейп) добавляете картинку и делаете ей 100% по высоте и ширине по window container (именно в процентах). И ставите на задний план Или можно просто загрузить фоном через кнопку в настройках зеро-блока

[@elizavetzubkova5499]

Спасибо, слайдер очень хорошо влился в проект) но есть проблема с фоновыми элементами( Блок покрашен в черный, на фоне красные пятна, к сожалению пятна перекрывает слайдер (тоже черного цвета) хотя заливку я убирала. В чем может быть проблема?

[@MaxKlimkov]

Спасибо за комментарий! Проверьте в слоях, чтобы пятна были под всеми элементами. Если не помогает, то кодом с помощью параметра z-index можно сделать, чтобы пятна ушли на задний план. Или вариант сделать картинку (черный фон с пятнами) и ее залить, как фон

[@VeraSadko]

А в чём м.б причина: у меня на ноуте и у некоторых других информация в слайдере отображается ровно, а у некоторых съезжает? Спасибо!

[@MaxKlimkov]

Возможно, поставили неверное отображение. Например, по grid container, а не window

[@VeraSadko]

Зеро блоки слайдера по windows. Элементы внутри нет

[@VeraSadko]

Всё перепроверила: слайд не становится в шэйп в основном блоке😵 да что ж такое-то...

[@VeraSadko]

Мой косяк😖Спасибо огромное за обратную связь!! Ты супер! Удачи тебе во всем!!!

[@Adelina_88]

спасибо огромное! У меня вопрос про адаптивность. все настроила как указанно в видео, в адаптивах все в левом верхнем углу, макеты подровняла по высоте карточек. но, когда с телефона захожу, галерея смещается в лево, хотелось бы ее по центру видеть, как это исправить?

[@MaxKlimkov]

Да, может быть такая проблема из-за того, что выравнивание именно по window container идёт. Поэтому тут вручную подбирать, двигать наоборот вправо Либо воспользуйтесь методом, который я предложил, в закреплено комментарии. Сделать горизонтальным скроллом

[@Adelina_88]

@@MaxKlimkov спасибо за ответ!

[@dagmarvesela941]

Может ли кто-то подсказать, возможно ли сделать сам шейп, в котором лежат карточки, залитым полупрозрачным цветом + с эффектом размытия?

[@MaxKlimkov]

Можно просто создать ещё один Шейп под низ главного шейпа и размыть в настройках зеро-блока. Получится пятно на фоне

[@dagmarvesela941]

@@MaxKlimkov пробовала, но почему-то главный шейп словно перекрывает второстепенный шейп и даёт белый цвет, карточки у меня тоже с удалённым фоном, если это вдруг имеет значение

[@Кристина-ж3х1у]

Добрый день, подскажите выравнивание сделала в настройках, но все равно текст и шейп съехали влево и кнопки не кликабельные

[@MaxKlimkov]

Значит, наверное, сделали выравнивание не по window container, а по grid container

[@Кристина-ж3х1у]

@@MaxKlimkov Cпасибо, я разобралась!!) Но другая проблема, у меня шейп(который прозрачный), при публикации сайта отображает фото, которое у меня загружено на фоне самого блока, как можно исправить?)

[@MaxKlimkov]

на фоне ничего не должно быть) @@Кристина-ж3х1у

[@diana_backer]

А как сделать так, чтобы слайды перелистывались плавно с эффектом исчезновения, а не так резко? помогите пожалуйста🙏

[@MaxKlimkov]

qna.habr.com/q/353498

[@ЕвгенийКудрявцев-з5ч]

Как сделать автоматическую смену слайдов?

[@maxburyak]

При пролистывании первого слайда назад появляется пустой слайд, затем последний. Как убрать пустой слайд?

[@5365218]

тож самое, + не появляются 2 последних слайда. В коде что-то не так, не могу найти

[@ohiolezhaa4154]

Привет, фото из слайдов рандомно пропадают. Не знаю, в чём дело :(

[@MaxKlimkov]

Привет! А слайдер один на сайте?

[@ИванБакастов-х6ж]

У картинок ставьте LAZYLOAD в положение OFF.

[@pantheonasia]

проблема с фоном, он размывается, блюр везде убран, цвет фона в зероблоках убран, но картинка на фоне в основном блоке размывается шейпом слайдера, я уже не знаю как это пофикстить, помогите

[@MaxKlimkov]

Забыли скорее всего убрать lazy-load

[@Armakss]

Как добавить загругленные картинки?

[@MaxKlimkov]

Добавить Шейп, в настройках шейпа сделать его кругом. Далее загрузить в Шейп картинку

[@sergey-manerko]

В стилях тильдошной указано: "Указываем высоту слайда" и "Указываем ширину слайда", а не всего слайдера.

[@denysnovytskyi]

А если нужно чтобы остальные карточки было видно (выходять за проеделы экрана) Как тогда быть? чтобы не скролить сраз2 2 карточки а по одной и остальные видно справа

[@MaxKlimkov]

Тогда поможет вариант из закреплённого комментария про адаптивную вёрстку. Только использовать для ПК

[@rimmchik__]

ПОМОГИТЕ 🙏🏻 Сама инструкция очень крутая! У меня всё получилось сделать. Я делала полноэкранный слайдер. НО в мобильной версии у меня контент съехал слево, хотя везде шейпы выровнены в мобильной версии. Помогите, пожалуйста

[@polinadmitriev2280]

Почему-то у меня ничего не работает;((((

[@АлексейФедоров-е6н]

Приветствую у вас есть видео Как адаптировать под другие устройства

[@MaxKlimkov]

Видео не записывал, к сожалению. Есть только инструкция в описании к видео

[@АлексейФедоров-е6н]

@@MaxKlimkov а может запишите такой ролик я думаю актуально

[@ekhosovershenstva123]

Зравствуйте, пожалуйста, подкажите почему когда все сделал как надо половина экран контента обрезается?

[@MaxKlimkov]

Возможно, в коде неверно выставили размера шейпа. Или Шейп меньше, чем ширина слайдов

[@ekhosovershenstva123]

@@MaxKlimkov размер шейпа 1920 на 1080, в коде тоже пишу это

[@ekhosovershenstva123]

@@MaxKlimkov размеры абсолютно идентичные

[@НикитаАлександров-л4е]

Сделал все 1 в 1 по гайду и все получилось, но возникло 2 проблемы. 1) Шейпы, которые должны листаться, достаточно широкие. И по итогу в декстоп слайдере они получаются наполовину обрезанными 2) В мобильной версии все хорошо, однако текст выглядит очень странно, не как в адаптиве. Он буквально по буквам переносится на разные строки и выглядит ужасно. Подскажите пожалуйста, что с этим делать

[@MaxKlimkov]

попробуйте создать отдельный блок Т123, поместить его внизу сайта и туда этот код поместить, чтобы исправить текст: .t-rec { word-break: normal !important; }

[@Sergey2207]

а на моб версии это тоже так работать будет?

[@MaxKlimkov]

Работать - да, но удобно ли? В мобильной уже не поместится две карточки рядом, поэтому либо их располагать вертикально одну за одной, но не удобно тогда листать, либо делать их все горизонтально и добавить код для горизонтального скролла. Например, этот - romanyu.ru/skroll-s-uderzhaniem-knopki-myshi

[@ibedil6208]

А можно сделать такой слайдер над видеофоном?

[@MaxKlimkov]

Да, можно)

[@ibedil6208]

@@MaxKlimkov Я несколько раз точно по инструкции сделал, но у меня не работает слайдер, не мог бы ты сказать какие ошибки могут быть, я был бы очень благодарен

[@MaxKlimkov]

@@ibedil6208 да, могу посмотреть код. Напишите в телеграм)

[@chipchilinka5645]

блин, пользуюсь твоим гайдом, спасибо огромное. Но адаптив всегда каким-то кривым получается, я уже не одно кресло сжег под собой из-за работы этого скрипта. Почему в адаптиве обрезается контейнер слайдера, не понимаю. Контейнер в главном блоке такой, какой размер высоты в блоке слайдера, но он обрезается непонятно почему :( upd: еще проблема в центрировании объектов. у меня слайд состоит из картинки, текста, заголовка к тексту и подзаголовка. все в windows container, все отцентровано относительно друг друга, но в публикации все в разнобой. приходится делать текста и картинку врастопырку, чтобы попасть в правильное отображение. в частности в адаптиве, по оси y что-то сдвинуть левее, что-то сдвинуть правее, чтобы на самом сайте все смотрелось ровно. дебилиииизм, я просто не могу((

[@MaxKlimkov]

Привет! Спасибо за комментарий! Обрезается скорее всего из-за того, что в коде забиты одни размеры шейпа (для пк-версии), а в мобильной версии они уже другие. Поэтому тут либо ещё один код с другими размерами шейпа сделать, либо посмотри вариант адаптива, про который я рассказывал в закрепленном комментарии)

[@MaxKlimkov]

Про центрирование: абсолютно все объекты должны быть одинаково отцентрованы по window container, как в видео. Да, там придется чуть сместить вбок, чтобы ровно было. Но у меня на видео видно, что все окей на опубликованной версии потом)

[@architec-metall]

Спасибо за подробный гайд! Но у меня возникла проблема, помогите разобраться! Сделал слайдер с пятью слайдами, по две карточки! В момент перелистывания на тритий и четвертый слайд, перестают отображаться картинки! И появляются они в момент определенного действия, в моем случае это нажатие на кнопку "подробнее" при появлении poup up. Картинки весят по 300 кб! Может кто посоветовать, что делать? Спасибо!

[@architec-metall]

Уменьшение изображений результата не дало!

[@MaxKlimkov]

Спасибо за комментарий! Сжать с помощью tiny png, так как это довольно большой размер изображений. Плюс не забудьте выключить "lazy load" в настройках элемента в зеро-блоке

[@dmitriynikolaev1903]

не пойму где у меня ошибка и почему не работает , сделал абсолютно все также

[@GraphicDesigner_Olga]

Здравствуйте. а где html код? не нашла на сайте

[@MaxKlimkov]

В описании под видео ссылка

[@solodolo3881]

Когда новые видео?

[@MaxKlimkov]

Сложно что-то новое придумывать, поэтому видео редко) Может быть подскажите тему?)

[@solodolo3881]

@@MaxKlimkov Создай с нуля лендинг адаптив под мобилку, очень востребованная тема сейчас. На тему архитектурного проектирования(проектная организация) Сделаешь?

[@MaxKlimkov]

@@solodolo3881 сверстать сайт по какому-нибудь макету и показать как адаптировать? Если это действительно интересно, то без проблем!)

[@solodolo3881]

@@MaxKlimkov +