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

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

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

Слайдер с переключением вкладок

Инструкция по установке

  • Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта
    Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.postnikovmd.com/tilda@1.5/mods.min.js"></script>
Скопировать код
Код скопирован!
Синхронизация обновлений включена. Новые версии и исправления будут устанавливаться автоматически.
Синхронизация обновлений включена. Модификации будут загружаться с альтернативного источника (для зарубежных проектов).
Синхронизация обновлений отключена. Текущая версия останется неизменной, независимо от обновлений.
  • Создайте слайдер из двух Zero-блоков
    Расположите в одном блоке слайды и другие подвижные элементы, а в другом — кнопки управления и статичный контент.
  • Для каждого блока задайте класс .uc-slider
    Если вы планируете использовать несколько слайдеров на одной странице, задайте соответствующим им блокам разные названия классов, например, .uc-slider1, .uc-slider2 и т. д.
    Как задать класс блокам/элементам?
  • Объедините содержимое каждого слайда в карточки (группы) и присвойте им тип Object
    Это позволит считать за слайды не каждый отдельный элемент в карточке, а их целиком. Внутри них при этом может быть неограниченное количество элементов.
    Как создать группу Object?
  • Присвойте получившимся карточкам со слайдами класс .slide
    Важно — количество элементов с этим классом должно совпадать с количеством реальных слайдов в блоке.
  • Создайте блоки, которые будут переключаться при нажатии на карточки слайдов, и задайте им класс .uc-slider-block
    Они должны располагаться в той же последовательности, в которой заданы сами вкладки.
    Если вы планируете использовать несколько слайдеров на одной странице, задайте их блокам разные названия классов, оканчивающиеся на -block, например: .uc-slider1-block, .uc-slider2-block и т. д.
  • Задайте ссылки кнопкам управления: кнопке «вперёд» ссылку #next, кнопке «назад» — #prev
    Если вы хотите использовать свою иконку для активного состояния стрелок, задайте стрелке «назад» такое же изображение, как и у стрелки «вперёд» и переверните элемент на 180º. См. пример.
  • Задайте в настройках модификации поведение слайдера и его анимацию
  • Скопируйте код и вставьте его в блок T123 в конец страницы
Как это сделано? 
<script> slider.init(".uc-slider", { arrows: true, select: true, elems: ".slide-img, .slide-arrow", style: { active: { backgroundColor: "#18181B" }, controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" } } }) </script>
<style>
    /* Задаём стили для логотипов и стрелок на карточках */
    .uc-slider .slide-img .tn-atom {
        opacity: .3 !important; /* Задаём неактивному логотипу непрозрачность 30%*/
    }
    .uc-slider .slide-img.active .tn-atom {
        opacity: 1 !important; /* Делаем активный логотип полностью непрозрачным */
        filter: invert(1); /* Инвертируем цвета логотипа для тёмного фона */
    }
    .uc-slider .slide-arrow.active .tn-atom {
        background-color: #7366FF !important; /* Перекрашиваем фон активной кнопки со стрелкой */
        background-image: url(https://static.postnikovmd.com/mods/arrow-diagonal-down-w.svg) !important; /* Загружаем своё изображение для активной стрелки */
    }
</style>
Открыть пример
Смотреть все примеры
+
Настройки модификации

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

Скорость и тип переходов:
Класс слайдера:
+ Настройки слайдера
Зациклить слайдер
Отключить переход для вкладок
Слайдер
Автопроигрывание
Скорость переключения слайдов
Включить автопроигрывание
Отключает анимацию перехода при переключении блоков (переключение происходит мгновенно)
Если включено, слайдер будет возвращаться в начало при пролистывании до последнего слайда
+ Настройки стилей
Стрелки
Цвет фона активной стрелки
Бордер активной стрелки
Бордер активного слайда
Цвет фона активного слайда
Слайды
Иконка активной стрелки
Если включено, неактивные слайды станут серыми и будут окрашиваться по наведении/клику.
Вы можете задать свой стиль для активного состояния стрелок. Они будут указывать на то, что слайдер можно пролистать.
Задайте значение, чтобы скрыть неактивные слайды или сделать их полупрозрачными.
Непрозрачность неактивных слайдов
Ч/б эффект
<!--slider.js Слайдер с переключением вкладок. https://postnikovmd.com/mods/slider/tabs-->
<script>slider.init(".uc-slider")</script>
Скопировать код
Скопировать код
Код скопирован!

Примеры

classic
Классический слайдер
Пример Zero-слайдера с управлением стрелками и свайпом
Открыть пример
flex
Слайдер с автолэйаутом
Аналог классического слайдера, собранный во flex-группах
Открыть пример
center
Слайдер с центрированием
Пример, в котором активный слайд располагается по центру
Открыть пример
window
Слайдер по Window-контейнеру
Пример слайдера, растянутого по всей ширине window-контейнера
Открыть пример
tabs
Слайдер со вкладками
Пример слайдера с переключением вкладок по нажатию на слайд
Открыть пример
hash
Слайдер с сохранением хэша
Вариант слайдера со вкладками и сохранением активной в URL
Открыть пример
shape
Слайдер в шейпе Zero-блока
Пример слайдера, встроенного в отдельный шейп в Zero-блоке
Открыть пример
center
Слайдер с центрированием
Аналог слайдера в шейпе с активным слайдом по центру
Открыть пример
vertical
Вертикальный слайдер
Слайдер в шейпе с вертикальным перелистыванием слайдов
Открыть пример
popup
Слайдер внутри поп-апа
Пример слайдера, размещённого внутри всплывающего окна (pop-up)
Открыть пример
textsplit
Слайдер с анимацией текста
Слайдер с эффектом появления текста внутри каждого слайда
Открыть пример

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

Элементы

Параметры

Показать больше

Распространенные проблемы

Подробная документация к слайдеру

Примеры использования, инструкции по установке и разбор наиболее распространенных ошибок
Присоединяйтесь к Telegram-каналу
Всё о возможностях библиотеки, новых модификациях и личном опыте
Перейти
t.me/postnikovmds
Чат для дизайнеров
«Вместе всё получится»
Поддержка по модификациям, обмен опытом, круассаны и многое другое
3,2K участников