Виджет карусели Elementor Image: бесплатный ползунок со световым ящиком и покровным потоком
Виджет Image Carousel в Master Addons превращает галерею WordPress в слайдер свайпибле, и это бесплатно. вы выбираете изображения, выбираете, сколько шоу на рабочем столе, планшете и телефоне, и добавляете автоигра, лайтбокс и 3D макет coverflow, если вы хотите один. каждый слайд можно стилизовать в его нормальном, зависающем и активном состоянии, а стрелки, точки и подписи следуют за вашим брендом. это работает для портфелей, продуктовых снимков, гостиничных и имущественных туров, а также логотипов клиентов.
Расширенная компоновка и контроль поведения
Возьмите полный контроль над тем, как ваша карусель выглядит и ведет себя. выберите карусель или макет Coverflow. Установите слайды на столбец для отображения в виде сетки и определите, сколько слайдов прокручивать. Включите такие функции, как автовоспроизведение, цикл, центральный режим и даже курсор захвата для интерактивного перетаскивания. опция "Наблюдатель" гарантирует, что он идеально работает внутри вкладок или аккордеонов.
- Гибкие компоновки: создавайте многорядные сетки или классические горизонтальные ползунки с полным контролем над столбцами и прокруткой.
- Плавное взаимодействие: установите скорость автопроигрывания, скорость анимации и включите паузу при наведении для удобного поведения.
- Интеллектуальные адаптивные функции: используйте автоматическую высоту, чтобы избежать неудобных пустых мест, и Observer, чтобы заставить его работать в скрытых контейнерах.
Стиль каждая часть, в каждом штате
Сделайте свою карусель идеальной частью вашего дизайна. не просто стилизовать изображения — стиль контейнера для каждого элемента. Установите уникальные фоны, границы, тени и заполнение для нормальных, зависающих и активных состояний. отрегулируйте пробел в элементе и общую непрозрачность. Этот уровень детализации позволяет создавать интерактивные карты, выделять активный слайд и обеспечивать четкую визуальную обратную связь во время взаимодействия пользователей.
- Интерактивная обратная связь: создайте отдельные эффекты зависания (например, подъем тени или изменение цвета), чтобы привлечь посетителей.
- Активный слайд-освещение: выделите текущий центральный слайд с другой рамкой или фоном.
- Полный визуальный контроль: настройте радиус границы, тень коробки и набивку для идеального оформления предметов.
Навигация и встроенный лайтбокс
Правильно направляйте своих посетителей на карусель изображения. создайте элегантную навигацию по стрелкам с помощью пользовательских значков, цветов, фона и позиционирования (внутри, снаружи). Спрячьте их на мобильном телефоне, чтобы выглядеть чище. Затем включите свою галерею со встроенным лайтбоксом. настройте значок предварительного просмотра, наложение и типографику подписей. Выберите между Fancybox и Elementor, чтобы открыть изображения в красивом полноэкранном режиме просмотра.
- Специальные навигационные стрелки: стрелки стиля с нуля — меняют цвет, размер, фон и горизонтальное смещение.
- Оптимизированный для мобильных устройств: выберите "Спрятать стрелку" на мобильном телефоне и полагайтесь на жесты свайпов, чтобы создать ощущение естественности.
- Премиум-лайтбокс: предложите увеличенный вид с настраиваемыми значками и накладками, превращая карусель в полноценную галерею.
Карусель изображений Elementor против карусели изображений главных дополнений
Оба виджета бесплатны. версии Elementor достаточно для базового слайдера с подписями и ссылками. выберите Master Addons один, когда вам нужен макет coverflow, ряды изображений или больше контроля над навигацией и стилем слайдов.
| Элементор Изображение Карусель | Карусель с изображением главных аддонов | |
|---|---|---|
| Цена | Бесплатно | Бесплатно |
| Слайды на просмотр на устройство | Да | Да |
| Макеты | Скользить или затухать | Карусель или 3D покровное течение |
| Несколько строк | Нет | Да, со слайдами на столбец |
| Навигация | Стрелки и точки | Стрелки, точки, динамические пули, дробь, индикатор выполнения и панель прокрутки |
| Лайтбокс | Элементор лайтбокс | Fancybox или Elementor с настраиваемым значком предварительного просмотра и наложением |
| Слайд-стайлинг | Базовый | Нормальное, зависающее и активное состояния |
| Привяжите каждое изображение к URL-адресу | Да | Нет, изображения открываются в лайтбоксе |
Как добавить изображение карусели в Элементор
Для более длительного прохождения со скриншотами читайте как создать имиджевую карусель в Элементоре.
- Установите бесплатный плагин Master Addons и отредактируйте свою страницу с помощью Elementor.
- Найдите на панели виджетов изображение "Карусель" и перетащите его в контейнер.
- Щелкните поле галереи, выберите изображения и установите разрешение изображения.
- Установите количество слайдов на устройство, затем включите автовоспроизведение, цикл и лайтбокс, если вы хотите их.
- Выберите "Карусель" или "Покровный поток", нанесите слайды и стрелки и опубликуйте.
Похожие карусели: Логотип Слайдер, Командный слайдер, Галерея Слайдер (Про) и Блог режим карусели виджета.
Часто задаваемые вопросы по карусели изображений
В чем главное преимущество перед базовой Image Carousel от Elementor?
Бесплатная карусель изображений Elementor хорошо справляется с простым ползунком: субтитры, лайтбокс, автозапуск и слайды на устройство. Master Addons добавляет трехмерную компоновку coverflow, многорядные сетки со слайдами на колонку, дробь, индикатор выполнения и навигацию по полосе прокрутки, выбор Fancybox или лайтбокса Elementor с пользовательским значком предварительного просмотра, стилизацию для нормальных, зависающих и активных слайдов, а также опцию Observer для каруселей внутри вкладок или аккордеонов.
Если я включу "Автовысоту", мои изображения будут растянуты или обрезаны?
Нет. Авто Высота регулирует общую высоту карусельного контейнера, чтобы соответствовать самому высокому скольжению, которое можно увидеть в данный момент. ваши изображения будут поддерживать свое соотношение сторон на основе других ваших настроек (например, “Image Size”). Он предотвращает создание больших пустых пространств фиксированной высоты, если у вас есть изображения различной портретной/ландшафтной ориентации.
Могу ли я использовать это для ползунка с логотипом в оттенках серого, чтобы раскрасить его на зависании?
Абсолютно! это идеальный вариант использования. загрузите изображения логотипа. на вкладке "Карусельные элементы" установите нормальное состояние "Непрозрачность" или используйте фильтр CSS, чтобы сделать их оттенками серого. Затем, в состоянии "Наведение" установите непрозрачность обратно на 1 и удалите фильтр. Встроенный стиль наведения на веревку упрощает этот эффект без пользовательского кода. или используйте Логотип Слайдер виджет, созданный для логотипов клиентов.
Как работает настройка "Наблюдатель", и когда ее использовать?
Наблюдатель наблюдает за изменениями в контейнере карусели Включить его (установить на Да), когда вы помещаете карусель внутри вкладки, гармошки, или тугл виджет, или где бы она ни была изначально скрыта Это гарантирует, что карусель рендеринг и функционирует правильно в момент, когда пользователь нажимает, чтобы показать ее родительский контейнер. если он сломан внутри вкладки, это обычно исправляет его.
Будет ли наличие нескольких каруселей с автовоспроизведением на одной странице вызывать проблемы с производительностью?
Он может, если у вас много (например, 15+).Каждая карусель автозапуска является движущимся элементом, который браузер должен анимировать. для достижения наилучшей производительности ограничьте автозапуск вашей самой важной каруселью героев.Для других подумайте о том, чтобы позволить пользователям прокручивать вручную. Кроме того, использование оптимизированных размеров изображений (через настройки разрешения изображений) имеет решающее значение для скорости.
Могу ли я связать элементы карусели с разными URL-адресами, а не только со лайтбоксом?
Не с этим виджетом. Он открывает изображения в лайтбоксе. если каждому слайду нужна своя ссылка, используйте Логотип Слайдер, или опция ссылки в собственной Image Carousel от Elementor.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
Дубликатор сообщений/страниц
