Web5X - Готовые сайты

Блог о создании сайта, конструкторе сайтов и Elementor

Карусель — виджет Elementor

Посещая сайты мы часто встречаемся с таким функционалом, как карусель изображений. Обычно, в стандартном представлении карусели, это некий список брендов или производителей, которые обычно размещают ближе к подвалу сайта или же в необходимом месте.  Так же вариантом исполнения, это вместо брендов, выставляют фотографии выполненных работ (или избранных изображений), которые постоянно прокручивают в определенном блоке.

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

Виджет "Карусель" предназначена для отображения списка изображений в один ряд. Количество изображений отображаемых в ряду, устанавливается настойками виджета.  Доступно отображения или скрытия дополнительных элементов, такие как стрелки, точки навигации, включения лайтбокса. А так же изменения поведения и настроек самой карусели (скорость, остановка, эффект) и различные стилевые оформления.

карусель - виджет конструктора сайта

На изображении выше мы видим две карусели. Та что сверху это карусель по умолчанию, а ниже карусель в виде слайдшоу т.е в настройках указано, что необходимо отображать только 1 изображение. Настроек у виджета карусели много и они разнообразны и очень похожи на настройки похожего виджета это "Медиа карусель".  Рассмотрим настройки и стилевые свойства виджета.

 

Содержимое

- Карусель

  • Изображения - добавление изображений в карусель. Используется стандартные средства медиа библиотеки и создания галереи.
  • Размер изображения - выбор из предустановленных размером изображений или установка своих размеров средствами конструктора.
  • Показывать слайдов - количество изображений в карусели, которые отображаются в текущий момент. Если установить отображение в 1 слайд, то появляется опция для изменения эффекта смены изображений.
  • Прокручивать слайдов - количество прокручиваемых изображений за одну инерцию, автоматическую или вручную.
  • Растягивать изображение - опция растягивания изображения по размеру блока, даже если изображение меньше необходимого размера.
  • Навигация - выбор навигации между отображением всех видов или только одного, например стрелки.
  • Ссылка на - ссылка на ресурс после клика т.е возможно установить произвольную ссылку или выбрать ссылку на текущие изображение.
  • Лайтбокс - отключение или включения функции всплывающего окна после клика на изображение.
  • Подпись - выбор источника для подписи. Доступно выбрать из заголовка изображения, подписи или описания. Все эти значения устанавливаются в медиа библиотеки, при загрузки изображений или их выборе.

- Дополнительные опции

  • Пауза при наведении - останавливает движение карусели при наведении на нее курсором мыши.
  • Проиграть автоматически - автоматический запуск карусели при старте страницы.
  • Скорость листания - скорость пролистывания карусели.
  • Зациклить листание - повторное листание изображений по кругу т.е после последнего изображения, сразу начинается первое.
  • Эффект - выбор эффекта при смене слайда. Выбор между скольжением и выцветанием. Данная настройка доступна если у вас отображается только один слайд за раз.
  • Скорость анимации - скорость анимации при переходе от одного слайда к другому.
  • Направление - направление движения слайдов карусели по умолчанию, влево или вправо.

Стили

 - Навигация
Изменение стилевых свойств элементов навигации, таких как позиция, размер и цвет для стрелок и точек навигации.

- Изображение
Свойства стилей изображения: Отступ, Тип границы и ее свойства и скругления углов.

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

 

Список всех виджетов Elementor вы можете посмотреть на странице Виджеты

Карусель — виджет Elementor: 10 комментариев

  1. Вставляю Карусель в секцию, добавляю галерею, настраиваю лайтбокс.
    Но когда уже на самой странице нажимаю на миниатюру — открывается изображение без возможности пролистывания, то есть чтобы от лайтбокса 1 изображения перейти к другому — нужно выйти обратно к странице с каруселью и нажать на следующее, а не просто пролистнуть дальше (хотя стрелки есть, но при наведении на них и нажатии — лайтбокс закрывается)

    1. День добрый. Из колонок по умолчанию ничем. Нужны более подробные примеры, возможно можно используя сторонние коммерческие плагины для элементора

      1. Нашел 2 плагина бесплатный Premium Addons for Elementor и платный где это можно сделать The Plus — Addon for Elementor Page Builder WordPress Plugi

  2. Добрый день.
    Создала карусель, но при проигрывание на мобильной версии возникают пустые слайды. Все настройки перепробывала, пустота не исчезает.Как исправить?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Блог о создании сайта, конструкторе сайтов и Elementor.
Авторские права © 2017-2020 . Все права защищены.
Готовые сайты на web5x.ru
Политика конфиденциальности