Модификация находится в бета-версии. Если нашли ошибку, сообщите о ней здесь
LinkedIn
Behance
Максим Постников
© 2024 Максим Постников. Все права защищены.
Ru
En

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

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

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

Инструкция по установке
  • 1
    Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта
    Этот код устанавливается только один раз. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.jsdelivr.net/gh/postnikovmd/tilda@1.0.5/slider.min.js"></script>
  • 1
  • 2
    Создайте два Zero-блока: первый со вкладками, второй с кнопками управления и задайте им класс .uc-slider
    Если вы планируете использовать несколько слайдеров на одной странице, задайте им разные названия классов, например, .uc-slider1, .uc-slider2 и т.д.
  • 3
    Задайте в настройках блока со вкладками параметр overflow: auto
    Если в слайдере есть блоки, выходящие по высоте за его границы, поставьте параметр overflow: auto только по оси X
  • 4
    Добавьте в слайдер карточки вкладок (шейпы, по которым будут определяться границы слайда) и задайте им класс .slide
  • 5
    Добавьте кнопки управления во второй блок. Для кнопки «вперёд» поставьте ссылку #next, для кнопки «назад» — #prev
    По-умолчанию неактивные кнопки становятся серыми. Чтобы задать для них свой стиль, пропишите его самостоятельно его через CSS. Неактивной кнопке присваивается класс .inactive — используйте его для настройки состояния.
  • 6
    Создайте блоки, которые будут отображаться при нажатии на каждую вкладку и задайте им класс .uc-slider-block
    Если вы планируете использовать несколько слайдеров на одной странице, задайте их блокам разные названия классов, оканчивающиеся на -block, например: .uc-slider1-block, .uc-slider2-block и т. д.

    Блоки должны располагаться в той же последовательности, в которой заданы сами вкладки. Если они перемешались, скопируйте, удалите и вставьте поочерёдно карточки вкладок в блоке со слайдером
  • 7
    Задайте в настройках модификации поведение слайдера и его анимацию
  • 8
    Скопируйте код и вставьте его в блок T123 в конец страницы
Видео скоро появится…
Настройки модификации
Настройки модификации
Скорость и тип переходов:
Класс слайдера:
Зациклить слайдер:
<script>slider.init(".uc-slider")</script>
Скопировать код

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

Параметры
Модификации для Zero
Оцените сервис
Нравится 100+ человек
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
Можете меня поблагодарить
Если у вас есть желание поблагодарить автора за работу, можете пожертвовать любую сумму на развитие проекта
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
© 2024 Максим Постников. Все права защищены.
Обо мне
Проекты
Блог
Связаться
Модификации
Максим Постников
 
Столкнулись с ошибкой?
Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно
Хотите получить ответ по проблеме? Напишите напрямую на почту hello@postnikovmd.com или в Telegram
Хотите получить ответ по проблеме? Напишите напрямую на на почту или в Telegram
Расскажите подробнее о проблеме, при которой модификация работает неправильно
Сообщение отправлено
Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время
Нравятся модификации?
Поделитесь впечатлениями от работы с библиотекой — обратная связь поможет нам стать лучше
Поделитесь впечатлениями о сервисе — обратная связь поможет нам стать лучше
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис