Виджет «Слайдер»

Слайдер позволяет размещать на странице несколько изображений или информационных блоков, между которыми посетитель может переключаться с помощью стрелок или индикаторов. Каждый слайд может содержать собственный заголовок и описание.

С помощью настроек слайдера можно выбрать внешний вид слайдов, способ переключения, автопрокрутку, навигацию, пропорции изображений, расположение текста и другие параметры.

Как добавить слайдер на страницу

Откройте редактор сайта и в панели «Виджеты» найдите «Слайдер 2.0». Перетащите виджет на нужное место страницы. После этого добавьте необходимое количество слайдов и настройте их внешний вид и поведение слайдера.

После добавления виджета и нажатия на него в редакторе откроется панель его настроек. Все добавленные слайды отображаются в разделе «Слайды». Чтобы перейти к нужному слайду, нажмите на него в списке.

Порядок слайдов можно изменить с помощью стрелок рядом с названием слайда. Также порядок можно менять непосредственно в самом слайдере: нажмите на слайд и переместите его в нужное положение. Чтобы добавить новый слайд, нажмите «+ Слайд» в верхней панели редактора. Слайд можно дублировать с помощью соответствующей кнопки в верхней панели. Это удобно, если нужно создать несколько похожих слайдов. Чтобы удалить слайд, выберите его и нажмите кнопку с изображением корзины.

Чтобы заменить изображение, выберите нужный слайд и нажмите «Заменить фото». Для каждого слайда можно использовать собственное изображение. Текст размещается поверх изображения. Его положение и внешний вид можно настроить в параметрах виджета.

 

В разделе «Вид» можно выбрать способ отображения слайдов. Доступны четыре варианта:

• Обложка — изображение занимает всю область слайда, а текст размещается поверх него;
• Сплит — изображение и содержимое слайда располагаются раздельно;
• Карточки — слайды отображаются в виде карточек;
• Миниатюры — для навигации используются миниатюры изображений.

Переход и автопрокрутка

В разделе «Переход и автопрокрутка» можно настроить способ переключения между слайдами. Доступны два варианта:

• Сдвиг — следующий слайд появляется за счёт перемещения текущего;
• Растворение — один слайд плавно сменяется другим.

Бесконечная прокрутка — если включить эту настройку, после последнего слайда можно продолжить переключение, и слайды начнут показываться сначала.
Листать автоматически — при включении этой настройки слайды будут переключаться автоматически без действий посетителя.
Интервал — определяет, через сколько секунд автоматически будет показан следующий слайд.
Пауза при наведении — если настройка включена, автоматическая смена слайдов приостанавливается, когда посетитель наводит курсор на слайдер.

Навигация

В разделе «Навигация» можно настроить элементы, с помощью которых посетители переключают слайды. Для стрелок доступны следующие варианты оформления:

• Круглые
• Квадратные
• Минимальные
• Скрыть

Если выбрать «Скрыть», стрелки переключения отображаться не будут.

Показывать при наведении — при включении этой настройки стрелки будут появляться только тогда, когда посетитель наводит курсор на слайдер. Это позволяет сделать интерфейс слайдера более минималистичным.

Индикатор

Индикатор показывает посетителю, какой слайд сейчас открыт и сколько всего слайдов доступно. Можно выбрать один из вариантов:

• Линии
• Точки
• Номер
• Скрыть

Индикатор можно разместить:

• На фото — поверх изображения;
• Под фото — за пределами изображения.

Пропорции

В разделе «Пропорции» задаётся соотношение ширины и высоты изображения. Доступны следующие варианты:

• 21:9
• 16:9
• 3:2
• 4:3
• 1:1
• 4:5
• 3:4
• 9:16

Выбирайте пропорции в зависимости от формата используемых изображений и дизайна страницы. Например:

• — широкий панорамный слайдер;
• — стандартный широкоформатный вариант;
• — квадратные изображения;
• — вертикальный формат.

В настройках мобильной версии (Инструкция: https://ukit.com/ru/help/mobile-version) есть возможность указать пропорции отдельно от ПК.

Картинка

В разделе «Картинка» можно настроить отображение изображения внутри слайда. Доступны два режима:

• Заполнить — изображение полностью заполняет область слайда. Если пропорции изображения и блока отличаются, часть изображения может быть обрезана.
• Вписать — изображение полностью помещается в область слайда без обрезки. При этом могут появиться свободные области по краям.

Скругление -  позволяет настроить радиус скругления углов изображения. Чем больше значение, тем сильнее будут скруглены углы.

Текст на фото

В этом разделе настраивается внешний вид области с текстом, расположенной поверх изображения. Можно выбрать один из трёх вариантов:

• Градиент — за текстом появляется градиентная подложка, которая помогает сделать текст более читаемым;
• Плашка — текст размещается на отдельной подложке;
• Нет — дополнительная подложка отсутствует.

С помощью сетки можно выбрать положение текста на изображении. Текст можно расположить:

• в верхней части;
• по центру;
• в нижней части;
• слева;
• по центру;
• справа.

Таким образом, можно выбрать любое из доступных положений текста в пределах слайда.

Важно: на узком экране текст всегда располагается в нижней части слайда. Это позволяет сохранить хорошую читаемость текста независимо от изображения.

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

Ширина текста — определяет максимальную ширину области, в которой размещается текст слайда.

Класс виджета

В разделе «Класс виджета» можно указать CSS-класс для виджета. Это может понадобиться для дополнительной настройки внешнего вида с помощью собственного CSS-кода. Инструкция по установке кода: https://ukit.com/ru/help/kak-dobavit-html-kod