Как сделать слайдер на Тильде из зеро-блоков
Приветствую! Подробная текстовая инструкция к видео о том, как сделать не полноэкранный слайдер на Tilda из zero-блоков.
Примеры, каким образом Вы можете оформить слайдер у себя на сайте. В нем могут находится карточки товаров, изображения, текст, фигуры и др.
Этапы создания слайдера
Примечания!
Вы можете сделать автоматическое переключение слайдера, вставив этот код в тег /script:
Адаптация под мобильные устройства:
В мобильной версии не поместится вместить две, три и более карточек. Поэтому 2 варианта:
1. Растянуть шейп вертикально и делать карточки внутри него тоже вертикально друг за другом. Все должно работать, как на ПК. Просто слайдер станет вертикальным и длинным.
2. Сделать горизонтально, чтобы карточки выходили за край устройства. И затем добавить горизонтальный скролл. Таким образом карточки будут листаться на мобильном пальцем горизонтально.
Важно, чтобы не конфликтовал код, сделать два блока. Один слайдер для ПК с отображением с 1200рх и до бесконечности с моим кодом выше, а второй до 1200рх и с горизонтальным скроллом
Два и более слайдеров на одной странице:
Если Вы хотите сделать несколько таких слайдеров на одной странице, то не забудьте поменять в новом коде: класс шейпа, ID слайдов, ссылки на стрелки (например, «#slider_left1» и «#slider_right2»), а также ОБЯЗАТЕЛЬНО класс «tildoshnaya-slider-owl» смените на какой-нибудь другой (например, «tildoshnaya-slider-owl1»)
Если остались вопросы или Вы хотите заказать продающий лендинг, то напишите мне в соцсетях или в комментариях под видео.
Коды для сайтов на платформе Тильда
Градиентные кнопки для сайтов на платформе Тильда
Данную модификацию я использую на сайтах, которые имеют определённую стилистику и заказчики хотят видеть градиентные кнопки. В тильде нет стандартной настройки, что бы сделать такую кнопку. Поэтому я использовал код, который беру с сайта michailozdemir.dev
Тут нам достаточно зайти на страницу, вставить нужные цвета, здесь же посмотреть как будет выглядеть наша кнопка. После чего копируем код и вставляем на тильде в блок другое T123. И не забудьте класс кнопке прописать, об этом я рассказываю тут
Тоже интересный эффект, который можно применить на различных сайтах. Код для глитч эффекта можно взять с этого сайта romanyu.ru Там же есть инструкция, которая поможет сделать подобный эффект на своём сайте.
У Романа много интересных модификаций для Тильды, которые можно применять на своих сайтах. Если что-то не получится, то можно всегда ему написать и попросить помощи.
Глитч в zero block на Тильде для текста
Калькулятор и квиз в zero block на Тильде
Если вам мало модификаций на сайтах, которые я написал выше, то на этом mo-ti.ru их много.
Различные модификации и код начиная от изменения эффектов кнопки и заканчивая сложными калькуляторами и квизами, которые периодически я использую в своих проектах.
Автора данного ресурса с модификациями для Тильды зовут Дмитрий. За небольшую плату можно получить доступ ко всем видео инструкциям на сайте. А если вы дружите с кодом, то и так поймёте как установить модификацию на сайт.
Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
1) Создаем основной Zero блок и добавляем в него элемент «SHAPE», в котором будет наш слайдер. У «SHAPE» нужно убрать цвет заднего фона, рамки, тени.
2) Добавляем дополнительные несколько блоков, которые будут слайдами. Все элементы в слайдах должны быть выравнены «Container: Window — Left — Top». Положение этих элемента не меняем, всегда в левом верхнем углу, именно эту область будет «видеть» shape в первом блоке. Дополнительные элементы можно перемещать в границах этого элемента.Добавляем контент — изображения (обязательно отключаем lazy load), кнопки, текст, формы.
3) Размеры по высоте shape и элементов — слайдов должны быть одинаковы.
5) Узнаем id блоков, которые будут слайдами, блока в котором будет слайдер и class shape элемента, в основном блоке.
6) Заменяем id и class shape элемента в первых строках нашего кода.
8 строка — Id блока, в котором будет слайдер.
10 строка — class элемента, в котором будет слайдер.
12 строка — id блоков, через запятую, которые должны стать слайдами.
7) В блоке со слайдером добавляем два изображения под стрелочки и указываем им ссылки #slider_left для стрелочки влево и #slider_right для стрелочки вправо.
Настройки слайдера:
21 строка — цикличность слайдера.
25 строка — количество слайдов на одном экране (после изменения надо проверить чтобы все правильно отображалось)
28−43 строки — адаптивность. Можно изменить количество слайдов в мобильной или планшетной версии
(Номера строк будут видны когда разместите код в блок T123, в редакторе)
Настройка слайдера на мобильном JS для Тильды
Есть слайдер с авто перелистыванием, который я использую только на мобильной версии (Тильда), вот код:
У меня вопрос, как сделать так, чтобы при нажатии (удержании) слайда на слайдере авто перелистывание приостанавливалось, а при «удалении» пальца с экрана продолжалось авто перелистывание?
А также, как сделать чтобы авто перелистывание начиналось только тогда, когда пользователь долиcтает до блока со слайдером на странице?
Также есть проблемы с прогрузкой самого слайдера, как сделать чтобы слайдер и его содержание успевали вовремя прогружаться?
Заранее спасибо за ответы!
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Отступ справа у слайдера slick в мобильном разрешении
http://factur.ru/ При 742 и ниже у всего dom почему-то появляется отступ(пустое место) справа.
Настройка слайдера
Добрый Тут даже суть не в том, что это слайдер. Исходные Имеем слайдер. panelclick включает.
Настройка слайдера
Все привет, У меня имеется код к слайдера но сам слайдер можно сказать нерабоате. 1) Он почему то.
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Настройка слайдера
При создании слайдера пару вопросов, в которых не удается справится в виду моей неопытности : 1.
Настройка слайдера
Привет Я купил Elementor Pro. Там есть компонент Слайды. Установил на главную страницу. Но.
Настройка слайдера dw-delux
Всем привет!Ребят подскажите как сделать что бы меню было поверх слайдера по аналогии как на этом.
Настройка слайдера на DLE 9.2
Народ, помогите с настройкой слайдера на моем сайте: http://mfcsaturn.com/ Шаблон DLE 9.2. По идее.
настройка слайдера в Cherry
здравствуйте помогите пожалуйста настроить слайдер в Cherry плагине. используется шорткод.
Настройка расширенного новостного слайдера на Joomla
Нужна помощь в настройке news show pro gk4. Как он вообще настраивается. Мануала вообще нет.
Урок Tilda Publishing. Как сделать слайдер в Zero Block / Студия WAVE
Для просмотра онлайн кликните на видео ⤵
Адаптивный слайдер в тильда! Как сделать кастомный слайдер в zero block. Tilda publishing.Подробнее
Автоматический слайдер в zero block. Лучший слайдер для сайта на Тильда.Подробнее
Слайдер из Zero block и обложки CR30N в TildaПодробнее
КАК СДЕЛАТЬ АВТОМАТИЧЕСКИЙ СЛАЙДЕР В ТИЛЬДА. Автоматизация слайдера в Tilda publishing!Подробнее
Как сделать крутящийся текст на Tilda (никак, нужна Figma)Подробнее
Как сделать любой кастомный слайдер в ТильдаПодробнее
Кастомный слайдер на Тильде в Зеро-блокеПодробнее
Урок Tilda Publishing. Пошаговая анимация – создаем эффект жалюзи / Студия WAVEПодробнее
Как сделать слайдер из нескольких элементов в ZeroBlock в TildaПодробнее
Слайдер в zero block Тильда.Подробнее
Слайдер в тильде. Как сделать кастомный слайдер в zero block.Tilda publishingПодробнее
Как вставить слайдер в ZeroBlock для TildaПодробнее
Слайдер из ZeroBlock в TildaПодробнее
Урок Tilda Publishing. Добавление карты в Zero Block с помощью HTML кода / Студия WAVEПодробнее
Анимация в Тильде. Zero BlockПодробнее
Эффект слайдера в Tilda Publishing Zero BlockПодробнее
Урок Tilda Publishing. Создаем эффект печатной машинки в Zero Block / Студия WAVEПодробнее
Урок Tilda Publishing. Как добавить видео и gif анимацию в Zero Block / Студия WAVEПодробнее
Урок Tilda Publishing. Создание блока в Zero Block. Эффект параллакс и эффект фиксация / Студия WAVEПодробнее