Изображение Карусель

Ряд статических изображений съедает пространство и просит посетителей прокрутить мимо каждого. карусель показывает тот же набор в компактном, свайпибле ползунке, который люди действительно трогают.The Изображение Карусель виджет в Мастер-аддоны для Elementor строит этот ползунок из обычной галереи WordPress, затем добавляет автовоспроизведение, лайтбокс, несколько стилей навигации и режим coverflow, и все это с панели Elementor.

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

Предпочитаете смотреть первым? Это короткое руководство охватывает изображение карусели от галереи до стиля:

Что делает виджет Image Carousel #

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

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

Прежде чем начать #

• WordPress с Элементор установлен и активен.
• Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
• Несколько изображений загружены в медиатеку или готовы к загрузке.

Как добавить виджет Image Carousel #

В редакторе Elementor откройте Элементы панель и поиск Изображение Карусель, или прокрутить в раздел Главные дополнения Перетащите виджет на свою страницу Он загружается пустым, пока вы не добавите изображения, поэтому галерея всегда является первым шагом.

Добавляйте и заказывайте изображения #

В Содержание вкладка, откройте Изображения раздел и щелкните поле галереи, чтобы запустить медиа-подборщик WordPress. выберите нужные изображения, затем используйте Редактировать галерею чтобы перетащить их в порядок, добавьте подписи или опустите их со значком X.

Вернувшись на панель, раздел "Изображения" дает вам еще три элемента управления:

• Разрешение изображения: выберите размер WordPress подается, от миниатюры до полного, или установите Пользовательский размер. средний или большой сохраняет свет страницы, сохраняя при этом острый вид в ползунке.
• Включить галерею Lightbox: включите это, чтобы посетители могли щелкнуть изображение, чтобы открыть его в полный размер во всплывающем окне. После его выключения изображения отображаются только.
• Библиотека лайтбоксов: выберите всплывающий движок, либо Fancybox, либо собственный лайтбокс Elementor. оба группируют изображения карусели, чтобы посетители могли пройти через них внутри всплывающего окна.

Настроить навигацию #

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

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

Настройте поведение карусели #

The Настройки карусели раздел - это то, где ползунок получает свое движение. это часть, которая решает, сколько изображений показать, как быстро они движутся и зацикливается ли ползунок.

• Слайды на колонку: количество строк при запуске ползунка в вертикальном направлении.
• Макет: выберите "Карусель" для стандартного плоского ползунка или "Покровный поток" для трехмерного эффекта.
• Авто Высота: пусть высота ползунка адаптируется к текущему изображению.
• Скорость автовоспроизведения и автовоспроизведения: включите автоматическое скольжение и установите задержку между слайдами за миллисекунды (5000 - пять секунд).
• Пауза на зависании: остановите автовоспроизведение, пока курсор находится над ползунком.
• Слайды для прокрутки: сколько изображений продвигается за шаг.
• Центральное скольжение, курсор захвата, режим без перетаскивания: параметры центрирования активного слайда, отображения курсора захвата и свободной прокрутки перетаскивания.
• Петля: запустите карусель как бесконечную петлю, а не останавливайтесь на последнем изображении.

Используйте макет Coverflow для трехмерного эффекта #

Переключатель Макет чтобы Покровный поток и слайды наклоняются в 3D стек, с активным изображением плоским в центре и соседями, расположенными под углом назад. А Эффект покровного потока появляется управление, чтобы вы могли точно настроить глубину и вращение. Он подходит для фотографий и разделов портфолио, где сам ползунок является частью дизайна.

Стиль карусели #

The Стиль вкладка разбивается на четыре раздела: Предметы карусели, Лайтбокс, Навигацияи Шаблоны. Вместе они закрывают вид слайдов, всплывающего окна и стрелок.

Предметы карусели #

В этом разделе стилизованы слайды изображения. Он имеет нормальное состояние, состояние "Наведение" и "Активное", поэтому вы можете выделить центрированный слайд среди остальных.

• Фон, Тип границы, Радиус границы, Тень коробки: стандартное обрамление для каждого слайда. Border Radius округляет углы изображения.
• Заполнение и зазор в деталях: пространство внутри каждого ползуна и зазор между ползунами.
• Режим тени и непрозрачность: дополнительная глубина и прозрачность для неактивных слайдов.

Лайтбокс, наложение и подписи #

The Лайтбокс в разделе стилизуется значок предварительного просмотра, который находится на каждом изображении, и наложение позади него, а также текст подписи.

• Пользовательский значок предварительного просмотра: замените значок масштабирования по умолчанию и установите его цвет, цвет наведения, размер и положение с помощью значка "Разрыв слева и сверху".
• Накладка: добавьте фоновый оттенок поверх изображения, что поможет вам, когда вы хотите, чтобы значок и подпись оставались читаемыми.
• Название субтитров: типографика, фон, цвет и цвет наведения для подписей, добавленных в галерее.

Стрелки навигации #

The Навигация раздел стиля управляет внешним видом стрелок в нормальных состояниях и состояниях наведения.

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

Результат на странице #

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

Обычные случаи использования #

• Фотография и портфолио галереи, где лайтбокс позволяет посетителям просматривать полноразмерные снимки.
• Ползунки изображений продуктов на целевой странице, где автоспектакль привлекает внимание.
• Логотип или партнерские полоски использование нескольких слайдов на вид и цикла.
• Фотографии отзывов или событий в компактном, свайпируемом блоке.
• Ползунки кроющих потоков героев для раздела "Проектирование-Прогноз".

Советы по работе с Image Carousel #

• Соответствуйте разрешению изображения размеру слайда. Подача полноразмерных файлов в небольшие слайды замедляет страницу; Среднего или Большого обычно достаточно.
• Сохраняйте скорость автопроигрывания комфортной. Около 4000-6000 мс дают людям время смотреть, не чувствуя спешки.
• Включите паузу при наведении курсора с помощью автозапуска. Он останавливает выскальзывание ползунка из-под того, кто читает подпись.
• Скрыть стрелки на мобильном. Пролистывание - естественный жест на сенсорных экранах, поэтому стрелки там часто просто загромождаются.
• Используйте состояние "Активно", чтобы выделить центральный слайд. Тонкая граница или полная непрозрачность активного предметного стекла направляют глаз.

Часто задаваемые вопросы #

Завершая #

The Изображение Виджет Карусель строит полнофункциональный ползунок изображения Elementor без отдельного плагина: загрузите галерею, установите автовоспроизведение и цикл, включите лайтбокс и создайте стиль слайдов и стрелок, чтобы они соответствовали вашему дизайну. чтобы найти другие способы отображения изображений, посмотрите на Галерея Слайдер и Фильтруемая галерея виджеты. Просмотрите полную версию Виджеты и расширения Master Addgets чтобы посмотреть, что еще включено.