1. Что такое слайдер?
2. Секция «Слайдер»
3 Слайдер с картинкой на фоне
3.1 Настройки слайдера
3.1.1 Вкладка «Слайдер»
3.1.1 Вкладка «Внешний вид»
3.2 Настройки слайда
4 Слайдер с иконками вместо точек
4.1 Настройки слайдера
4.1.1 Вкладка «Слайдер»
4.1.1 Вкладка «Внешний вид»
4.2 Настройки слайда
Слайдер представляет собой виджет или секцию, которая содержит несколько слайдов. Слайды перелистываются внутри слайдера, влево или вправо. Вы можете поместить любые виджеты внутрь слайдов, чтобы они перелистывались.
На примере ниже, добавим по одному виджету картинки, в каждый из слайдов и пролистаем их.
Данные слайды с виджетами будут пролистываться с заданной вами периодичностью (от 2 до 600 секунд). Подробнее об этих настройках речь пойдет в разделе ниже.
Также можно перелистнуть слайд нажатием на стрелки сбоку или точку внизу:
Есть 2 варианта добавления слайдера:
1. Виджет «Слайдер»
2. Секция «Слайдер»
В данной инструкции мы разберем, как добавить секцию «Слайдер» и какими они бывают.
Если вам нужно добавить виджет «Слайдер» - сделать это можно по нашей инструкции:
«Виджет «Слайдер»
Добавляем секцию-слайдер на страницу:
Есть 3 варианта секции-слайдер:
1. С цветным фоном (в дальнейшем его можно изменить)
2. С иконками вместо точек (по нажатию на которые, можно перейти к нужному слайду)
3. С картинкой на фоне (в дальнейшем ее можно изменить)
Добавим 2 разных секции-слайдер на записи:
Помимо отдельной вкладки с секциями слайдера, которую мы использовали выше, в некоторых других вкладках уже есть готовые шаблоны секций-слайдеров, уже с контентом, и немного видоизмененные. Готовые секции-слайдер есть в следующих вкладках:
Описание
Цифры
Товары
Разберем секцию-слайдер с картинкой на фоне.
В этих настройках мы можем указать внешние и технические особенности. В настройках есть 2 вкладки:
1. Слайдер (с техническими настройками)
2. Внешний вид (визуальное изменение слайдера)
Разберем по порядку обе вкладки, со всеми ее функциями.
В этой вкладке мы имеем следующие функции:
Здесь мы можем изменить порядок показа слайдов. Для этого зажмем левую кнопку мыши на кнопке перетаскивания (четыре стрелки), и потянем вниз или вверх. Чем ниже слайд в этом списке - тем дальше он будет в очереди на показ.
Здесь же мы можем сделать копию слайда (вместе с его содержимым)
Или удалить слайд
Чтобы добавить новый, пустой слайд - нажмите на кнопку «Добавить пустой шаг»
Изначально, новый слайд появляется в самом низу списка и будет показываться последним.
Слайды будут автоматически переключаться на следующий через заданное время. В этом поле (время показа слайдов) можно задать желаемый период для перелистывания (от 2 до 600 секунд).
❗Важно: если посетитель перелистнул слайд нажатием на стрелку, или точку под слайдом - автоматически перелистываться он больше не будет, пока посетитель не перезагрузит страницу.
Если функция плавного перелистывания включена - посетитель будет видеть анимацию, при перелистывании слайдов.
Пример, с включенной функцией:
Если отключить функцию - анимации при перелистывании не будет, и посетитель будет видеть только моментальную смену слайда. Пример с отключенной функцией:
В этой вкладке можно настроить внешний вид слайдера. Здесь мы имеем следующие функции:
Эта функция активирует или деактивирует показ стрелок по краям слайдера. С помощью этих стрелок, посетитель может перелистывать слайды влево или вправо.
Мы можем изменить стандартный цвет стрелок. Например, укажем для них желтый цвет:
Здесь мы можем изменить размер стрелок и их толщину.
С помощью этой функции, мы регулируем отступ между стрелками и краем секции. Чем меньше отступ - тем ближе стрелка будет к краю секции. На примере ниже, посмотрим на максимальное и минимальное значение:
Эта функция активирует или деактивирует показ точек внизу слайдера. С помощью этих точек, посетитель может перейти на любой из слайдов. Например, нажав на вторую точку - мы перейдем на второй слайд.
Активная точка - та, которой соответствует активный слайд. Например, если мы находимся на втором слайде - активной будет вторая точка. Мы можем изменить цвет этой точки. Например, укажем ей желтый цвет:
В этом пункте указываем размер точек.
Здесь указываем отступ, от нижнего края секции до точек. Чем больше отступ - тем выше будут точки от нижнего края.
В этом разделе мы сможем найти исходный код слайдера и внести в него изменения.
Помимо настроек слайдера, которые мы разобрали выше, мы также имеем настройки конкретного слайда:
В этих настройках мы можем выбрать, какой фон будет у этого слайда. Обратите внимание, что здесь мы выбираем фон для того слайда, в котором находимся. И если перелистнуть на следующий слайд - там уже можно будет выбрать другой фон.
Для примера, добавим на этот слайд другую картинку на фон, и перелистнем на следующий слайд:
Выше мы разбирали настройки слайдера с картинкой на фоне. Но, также есть секция-слайдер, с иконками вместо точек:
Он отличается от слайдера с картинкой на фоне, следующим:
1. Вместо точек на нем иконки. И по нажатию на иконку, мы можем перейти к нужном слайду
2. В нем нет стрелок. Слайдер перелистывается только автоматически (с заданной периодичностью) и по нажатию на иконку
3. Настройки этого слайдера отличаются от тех, которые мы разобрали выше, в разделе о слайдере с картинкой на фоне
В этих настройках мы можем указать внешние и технические особенности. В настройках есть 2 вкладки:
1. Слайдер (с техническими настройками)
2. Внешний вид (визуальное изменение слайдера)
Разберем по порядку обе вкладки, со всеми ее функциями.
Вкладка «Слайдер» у этой секции такая же, как у слайдера с картинкой на фоне. Эти настройки мы разбирали в разделе Вкладка «Слайдер»
Эта вкладка отличается от настроек слайдера с картинкой на фоне. В отличии от слайдера с картинкой на фоне, в ней есть только одна функция «Цвет панели вкладок». В ней мы указываем цвет фона панели, на которой находятся иконки:
Помимо настроек слайдера, которые мы разобрали выше, мы также имеем настройки конкретного слайда:
В этих настройках мы можем выбрать, какой фон будет у этого слайда. Обратите внимание, что здесь мы выбираем фон для того слайда, в котором находимся. И если перелистнуть на следующий слайд - там уже можно будет выбрать другой фон.
Для примера, добавим на этот слайд другую картинку на фон, и перелистнем на следующий слайд:
Чтобы заменить иконку в слайдере - нажмите на нее дважды и выберите подходящую иконку:
Готово!🎉 Мы добавили и настроили секцию-слайдер 👍