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

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

Классический слайдер в 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
Добавьте кнопки управления во второй блок. Для кнопки «вперёд» поставьте ссылку #next, для кнопки «назад» — #prev

Если вы хотите использовать свою иконку для активного состояния стрелок, задайте стрелке «назад» такое же изображение, как и у стрелки «вперёд» и переверните элемент на 180º.
Задайте в настройках модификации параметры поведения слайдера и его анимацию
Скопируйте код и вставьте его в блок T123 в конец страницы

Как это сделано?

<script> slider.init(".uc-slider", { style: { controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" } } }) </script>

Открыть пример

Пример с автолэйаутом

+

Настройки модификации

Скорость и тип переходов:

Класс слайдера:

Зациклить слайдер:

+ Настройки стилей

Стрелки

Цвет фона активной стрелки

Бордер активной стрелки

Иконка активной стрелки

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

+ Настройки автопроигрывания

Скорость смены слайдов

Автопроигрывание

<!--slider.js Слайдер в Zero-блоке. https://postnikovmd.com/mods/slider-->
<script>slider.init(".uc-slider")</script>

Скопировать код

Особенности

Управляется стрелками/свайпом

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

Слайдер будет работать, даже если блок сделан полностью в Auto Layout
Можно встроить в любой шейп

Позволяет легко встроить слайдер в любой Zero-блок. Подробнее

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

Элементы

Параметры

Стили

Активному слайдам и его элементам присваивается класс .active. Слайдам, находящимся в поле видимости, присваивается класс .visible. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно. Используйте эти классы для кастомизации стилей через CSS.