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

Слайдер из 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

В качестве карточек можно использовать как отдельные шейпы/изображения/др., так и группы с типом 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.