­Продвинутый слайдер в Zero‑блоке

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

Слайдер с пагинацией

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

  • Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта
    Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.postnikovmd.com/tilda@1.5/mods.min.js"></script>
Скопировать код
Код скопирован!
Синхронизация обновлений включена. Новые версии и исправления будут устанавливаться автоматически.
Синхронизация обновлений включена. Модификации будут загружаться с альтернативного источника (для зарубежных проектов).
Синхронизация обновлений отключена. Текущая версия останется неизменной, независимо от обновлений.
  • Создайте Zero-блок со слайдером и задайте ему класс .uc-swiper
    Если вы планируете использовать несколько слайдеров на одной странице, задайте им разные названия классов, например, .uc-swiper1, .uc-swiper2 и т. д.
    Как задать класс блокам/элементам?
  • Объедините содержимое каждого слайда в карточки (группы) и присвойте им тип Object
    Это позволит считать за слайды не каждый элемент в карточке, а их целиком. Внутри карточки может быть неограниченное количество элементов.
    Как создать группу Object?
  • Присвойте получившимся карточкам со слайдами класс .slide
    Важно — количество элементов с этим классом должно совпадать с количеством реальных слайдов в блоке. Модификация будет воспринимать за слайды именно их.
  • Объедините все карточки в общую группу с Auto Layout (опционально)
    Если слайдер нужно вписать в определенные границы, данная группа будет выступать для него контейнером. Задайте ей необходимую ширину, а также overflow: hidden, если хотите, чтобы неактивные слайды скрывались за её пределами.
    Как создать группу с Auto Layout?
  • Добавьте в блок элементы с нумерацией слайдов: текущему слайду присвойте класс .current, общему их количеству — .total
    В качестве элементов рекомендуется использовать текст (Text) или кнопки (Button). Их можно расположить в любом месте блока.
  • Объедините элементы с нумерацией в общую группу с Auto Layout
    Внутри этой группы могут также находиться разделитель и любые другие элементы.
  • Задайте ссылки кнопкам управления: кнопке «вперёд» ссылку #next, кнопке «назад» — #prev
    Если вы хотите использовать свою иконку для активного состояния стрелок, задайте стрелке «назад» такое же изображение, как и у стрелки «вперёд» и переверните элемент на 180º. См. пример.
  • Задайте в настройках модификации поведение слайдера и его анимацию
  • Скопируйте код и вставьте его в блок T123 в конец страницы
Как это сделано? 
<!--swiper.js Продвинутый слайдер в Zero-блоке. https://postnikovmd.com/mods/swiper-->
<script>swiper.init('.uc-swiper', { style: { controls: { backgroundColor: "#18181B", borderColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/mods/arrow-slider-w.svg" } } })</script>
Открыть пример
Смотреть все примеры
+
Настройки модификации

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

Скорость и тип переходов:
Класс слайдера:
+ Настройки слайдера
Зациклить слайдер
Отображать слайды по центру
Эффект переключения слайдов
Бесконечный слайдер
Слайдер
Автопроигрывание
Скорость переключения слайдов
Включить автопроигрывание
Если включено, активный слайд будет выравниваться по центру экрана
Если включено, слайдер будет возвращаться в начало при пролистывании до последнего слайда.
Если включено, слайды будут листаться бесконечно. Не совместимо с зацикливанием (params.loop)
+ Настройки стилей
Стрелки
Цвет фона активной стрелки
Бордер активной стрелки
Иконка активной стрелки
Позволяет задать свою иконку для стрелок в активном состоянии.

Примечание: для того, чтобы у кнопки «назад» иконка отображалась корректно, задайте ей такое же изображение, что и для кнопки «вперёд», и поверните её на 180º в настройках элемента
<!--swiper.js Продвинутый слайдер в Zero-блоке. https://postnikovmd.com/mods/swiper-->
<script>swiper.init(".uc-swiper")</script>
Скопировать код
Скопировать код
Код скопирован!

Примеры

classic
Классический слайдер
Пример продвинутого слайдера с управлением стрелками и свайпом
Открыть пример
dots
Слайдер с пагинацией
Аналог классического варианта со стрелками и точками (пагинацией)
Открыть пример
scrollbar
Слайдер с полосой прокрутки
Слайдер, использующий скроллбар для управления прокруткой
Открыть пример
center
Слайдер с центрированием
Пример, в котором активный слайд находится по центру экрана
Открыть пример
infinite
Бесконечный слайдер
Пример слайдера, который можно листать бесконечно, без зацикливания
Открыть пример
fractions
Слайдер со счетчиком
Пример со счетчиком текущего и общего количества слайдов
Открыть пример
numbers
Слайдер с нумерацией
Альтернативный слайдер с точками, содержащими номера слайдов
Открыть пример
scale
Слайдер с масштабированием
Пример, в котором активный слайд становится больше неактивных
Открыть пример
coverflow
Слайдер с 3D-эффектом
Пример слайдера с 3D-трансформацией карточек (Coverflow)
Открыть пример
ticker
Бегущая строка
Пример, в котором слайдер используется как бегущая строка
Открыть пример

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

Элементы

Параметры

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

Если при установке что-то пошло не так

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