Время настройки: 5 минут

Слайдер из Zero‑блоков

Позволяет создавать полностью кастомные слайдеры из Zero-блоков — с управлением кнопками, зацикливанием, табами и настраиваемой анимацией
Дополнение
Дополнение

Слайдер в любом шейпе Zero-блока

Инструкция по установке
  • Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта
    Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>
Скопировать код
Код скопирован!
Синхронизация обновлений включена. Новые версии и исправления будут устанавливаться автоматически.
Синхронизация обновлений отключена. Текущая версия останется неизменной, независимо от обновлений.
  • Создайте Zero-блок со слайдером и задайте ему класс .uc-slider
    Если вы планируете использовать несколько слайдеров на одной странице, задайте им разные названия классов, например, .uc-slider1, .uc-slider2 и т. д.
  • Добавьте в слайдер карточки слайдов (элементы/группы с типом Object) и задайте им класс .slide
    В качестве карточек можно использовать как отдельные шейпы/изображения/др., так и группы с типом Object. Важно — количество элементов с классом .slide должно совпадать с количеством самих слайдов в блоке.
  • Объедините всё содержимое слайдера в группу с типом Object
    В этой группе могут быть не только сами слайды, но и сопутствующие элементы — иконки, текст, кнопки или всё, что должно листаться вместе со слайдером.
  • Создайте шейп, внутри которого будет находиться слайдер и задайте ему класс .container
    Шейп можно расположить в любом месте Zero-блока. Единственное условие — его высота должна быть такой же, как и высота слайдера.
  • Добавьте кнопки управления в Zero-блок. Для кнопки «вперёд» задайте ссылку #next, для кнопки «назад» — #prev
    Если вы хотите использовать свою иконку для активного состояния стрелок, задайте стрелке «назад» такое же изображение, как и у стрелки «вперёд» и переверните элемент на 180º.
  • Задайте в настройках модификации параметры поведения слайдера и его анимацию
  • Скопируйте код и вставьте его в блок T123 в конец страницы
Как это сделано?
<script> slider.init(".uc-slider", { autoplay: true, style: { controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" } } }) </script>
Настройки модификации
Настройки модификации
Скорость и тип переходов:
Класс слайдера:
Зациклить слайдер
Отображать слайды по центру
Отключить перетаскивание мышью
Слайдер
Автопроигрывание
Скорость переключения слайдов
Включить автопроигрывание
Если включено, активный слайд будет выравниваться по центру экрана
Если включено, слайдер будет возвращаться в начало при пролистывании до последнего слайда
Слайды
Непрозрачность неактивных слайдов
Размытие неактивных слайдов
Размер неактивных слайдов
Выбранная опция уменьшает размер неактивных слайдов.

Примечание: для того, чтобы между слайдами сохранялись постоянные отступы, у их общей группы должен быть включён автолэйаут. См. пример
Стрелки
Цвет фона активной стрелки
Бордер активной стрелки
Иконка активной стрелки
Позволяет задать свою иконку для стрелок в активном состоянии.

Примечание: Для того, чтобы у стрелки «назад» иконка отображалась корректно, задайте ей такое же изображение, что и для стрелки «вперёд», и поверните её на 180º в настройках элемента
<!--slider.js Слайдер в шейпе Zero-блока. https://postnikovmd.com/mods/slider/shape-->
<script>slider.init(".uc-slider")</script>
Скопировать код
Скопировать код
Код скопирован!
Особенности
  • Управляется стрелками/свайпом
    Стрелкам можно задавать стили, которые будут меняться при свайпе
  • Слайдер будет работать, даже если блок сделан полностью в Auto Layout
  • Позволяет сделать свой слайдер с переключением вкладок. Подробнее

Документация

Элементы
Параметры
Стили
Активному слайдам и его элементам присваивается класс .active. Слайдам, находящимся в поле видимости, присваивается класс .visible. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно. Используйте эти классы для кастомизации стилей через CSS.
Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению
Если при установке что-то пошло не так
Чат для дизайнеров
Вместе всё получится
3 000+ человек
Присоединяйтесь к авторскому Telegram-каналу!
Всё о возможностях библиотеки, новых модификациях и тех. поддержке
t.me/postnikovmds
Понравились модификации?
Можете отправить любую сумму, чтобы поблагодарить автора за работу. Вам плюсик в карму, а мне приятно!
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
 
LinkedIn
Behance
Максим Постников
© 2025 Максим Постников. Все права защищены.
Ru
En
Столкнулись с ошибкой?
Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно
Хотите получить ответ по проблеме? Напишите напрямую на почту hello@postnikovmd.com или в Telegram
Хотите получить ответ по проблеме? Напишите напрямую на на почту или в Telegram
Расскажите подробнее о проблеме, при которой модификация работает неправильно
Сообщение отправлено
Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время
Поделитесь впечатлениями
Нравятся модификации?
Расскажите про опыт ваш работы с модификациями — обратная связь поможет сделать их ещё лучше!
Расскажите про ваш опыт работы с ними — обратная связь поможет сделать их лучше!
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис
Максим Постников | Дизайн...
Отключение автоскейла для для отдельных браузеров/устройств
27
20 фев в 12:00
120