Модификация находится в бета-версии. Если нашли ошибку, сообщите о ней здесь
LinkedIn
Behance
Максим Постников
© 2024 Максим Постников. Все права защищены.
Ru
En

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

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

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

Инструкция по установке
  • 1
    Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта
    Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.jsdelivr.net/gh/postnikovmd/tilda@1.2/mods.min.js"></script>
Скопировать код
Код скопирован!
Синхронизация обновлений включена. Новые версии и исправления будут устанавливаться автоматически.
Синхронизация обновлений отключена. Текущая версия останется неизменной, независимо от обновлений.
  • 1
  • 2
    Создайте Zero-блок со слайдером и задайте ему класс .uc-slider
    Если вы планируете использовать несколько слайдеров на одной странице, задайте им разные названия классов, например, .uc-slider1, .uc-slider2 и т. д.
  • 3
    Добавьте в слайдер карточки слайдов (шейпы, по которым будут определяться границы слайда) и задайте им класс .slide
  • 4
    Объедините содержимое слайдера в группу с типом Object
    В этой группе могут быть не только сами слайды, но и сопутствующие элементы — иконки, текст, кнопки или всё, что должно листаться вместе со слайдером.
  • 5
    Создайте шейп, внутри которого будет находиться слайдер и задайте ему класс .container
    Шейп можно расположить в любом месте Zero-блока. Единственное условие — его высота должна быть такой же, как и высота слайдера.
  • 6
    Добавьте кнопки управления в Zero-блок. Для кнопки «вперёд» поставьте ссылку #next, для кнопки «назад» — #prev
  • 7
    Задайте в настройках модификации параметры поведения слайдера и его анимацию
  • 8
    Скопируйте код и вставьте его в блок 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>
Видео скоро появится…
Настройки модификации
Настройки модификации
Скорость и тип переходов:
Класс слайдера:
Зациклить слайдер:
Стрелки
Цвет фона активной стрелки
Бордер активной стрелки
Иконка активной стрелки
Вы можете задать свой стиль для активного состояния стрелок. Они будут указывать на то, что слайдер можно пролистать.
Скорость смены слайдов
Автопроигрывание
<script>slider.init(".uc-slider")</script>
Скопировать код
Скопировать код
Код скопирован!
Особенности
  • Управляется стрелками/свайпом
    Стрелкам можно задавать стили, которые будут меняться при свайпе
  • Позволяет сделать свой слайдер с переключением вкладок. Подробнее
  • Позволяет легко встроить слайдер в любой Zero-блок. Подробнее

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

Элементы
Параметры
Стили
Если слайд находится в поле зрения пользователя, ему присваивается класс .active. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно.
Эти классы можно использовать для кастомизации стилей через CSS.
Чат для дизайнеров
Вместе всё получится
3 000+ человек
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
Можете меня поблагодарить
Если у вас есть желание поблагодарить автора за работу, можете отправить любую сумму на развитие проекта
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
 
Столкнулись с ошибкой?
Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно
Хотите получить ответ по проблеме? Напишите напрямую на почту hello@postnikovmd.com или в Telegram
Хотите получить ответ по проблеме? Напишите напрямую на на почту или в Telegram
Расскажите подробнее о проблеме, при которой модификация работает неправильно
Сообщение отправлено
Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время
Нравятся модификации?
Поделитесь впечатлениями от работы с библиотекой — обратная связь поможет нам стать лучше
Поделитесь впечатлениями о сервисе — обратная связь поможет нам стать лучше
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис