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

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

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

+

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

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

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

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

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

Стрелки

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

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

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

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

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

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

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

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

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

Особенности

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

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

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

Позволяет сделать свой слайдер с переключением вкладок. Подробнее

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

Элементы

Параметры

Стили

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