Web5X Блог

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

Web5X Блог

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

Поиск по блогу

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

Обновлено: 08.03.2018
18 комментариев

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

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

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

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

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

 

Содержимое

- Карусель

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

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

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

Стили

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

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

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

 

Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

18 комментариев

  • здравствуйте! можно ли на карусель нанести текст ?? спасибо)

  • Здравствуйте!
    Я ставил карусель добавил галерею в режиме редактирование показывает картинки а вот в режиме просмотра нет. В чем проблема?

    • У меня была такая же проблема. После обновления у Elementor в настройках появилась вкладка «Эксперимены». Там альфа и бета версии улучшения. Отключил «Улучшенная загрузка ресурсов». После этого слайдер заработал.

    • A

      Здравствуйте. Я не знаю в чем проблема, в слепую сложно ответить. Может кеш браузер очистить, может какой то плагин создает ошибку, может сама версия элементора не совместима с версией движка, может вирус. Если есть версия PRO, то может обновить до последней версии и элементор и версию PRO.

  • Добрый день! Возможно ли как-то поменять точки навигации на цифры, чтобы было, к примеру — 1/5, 2/5, 3/5 и т.д.?

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

  • Приветствую. Чем можно сделать карусель из колонок?

    • A

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

  • А нельзя ли для каждой картинки в каруселе назначить отдельную ссылку? «Ссылка слайда» не работает

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

Добавить комментарий для Андрей (Отменить ответ)