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
Создайте блоки, которые будут отображаться при нажатии на каждую вкладку и задайте им класс .uc-slider-block

Если вы планируете использовать несколько слайдеров на одной странице, задайте их блокам разные названия классов, оканчивающиеся на -block, например: .uc-slider1-block, .uc-slider2-block и т. д.

Блоки должны располагаться в той же последовательности, в которой заданы сами вкладки. Если они перемешались, скопируйте, удалите и вставьте поочерёдно карточки вкладок в блоке со слайдером
Задайте в настройках модификации поведение слайдера и его анимацию
Скопируйте код и вставьте его в блок 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>

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

Особенности

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

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

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

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

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

Элементы

Параметры

Стили

Если слайд находится в поле зрения пользователя, ему присваивается класс .active. Активной и неактивной стрелке присваиваются классы .active и .inactive соответственно.
Эти классы можно использовать для кастомизации стилей через CSS.