Бросьте Изображение Виджет Карусель на странице выберите изображения из медиатеки, установите слайды для каждого устройства и включите автовоспроизведение. Четыре шага, около двух минут и лицензия не нужна.
Это короткая версия Остальное охватывает настройки, которые отделяют карусель, которая работает от той, которая выглядит немного неправильно на телефонах, плюс макет coverflow, лайтбокс, и две ошибки изображения, которые делают в остальном тонкую карусель медленной Не уверен, что изображение карусель даже правильной формы? полная линейка карусельных виджетов сравнивает каждый тип в одном месте и карусель против слайдер-поломки улаживает именование.
Что нужно
Элементор бесплатно и Мастер-аддоны бесплатно. собственная имиджевая карусель Elementor охватывает основы (подписи, лайтбокс и слайды на устройство), но у нее нет макета coverflow, строк или навигации в стиле прогресса, поэтому в этом прохождении используется Карусель с изображением главных аддонов, который также бесплатен и добавляет подписи, лайтбокс и макет coverflow.
Шаг 1: Добавьте виджет
Откройте страницу в Elementor и найдите на панели виджетов “image carousel.” Перетащите его в контейнер.
Он отображается с помощью изображений-заполнителей, чтобы вы могли видеть форму, прежде чем фиксировать какой-либо контент. Оставьте их пока. Проще настроить макет на основе последовательных заполнителей, чем на основе ваших реальных фотографий, которые имеют разные размеры.
Шаг 2: Добавьте свои изображения
Щелкните поле галереи и выберите медиатеку или загрузите. Закажите дела и перетащите на заказ работы, так что поставьте на первое место свое самое сильное изображение, потому что на мобильном устройстве оно может быть единственным, что кто-либо видит.
В настройках контента вы найдете размер изображения, источник субтитров и поведение ссылок.
Размер изображения - это сеттинг, который люди оставляют на Full и сожалеют. Полный означает исходную загрузку: экспорт камеры 4000px, подаваемый в слайд 400px. WordPress уже сгенерировал меньшие версии; выбрать medium_large или large и вес карусели вы на большую часть урежете без видимой разницы.
Подписи извлекайте из поля "Подпись" или "Описание" медиатеки, поэтому, если слайдам нужен текст, пишите его там, а не ищите текстовое поле для каждого слайда в виджете.
Шаг 3: Навигация
Стрелки, точки, дробь или полоска прокрутки. выбирайте, исходя из того, сколько слайдов у вас есть:
- Слайды до 8: точки. люди могут увидеть весь набор с первого взгляда и прыгнуть вокруг.
- с 8 по 20: стрелки только. двадцать точек - это мазок, а не контроль.
- Свыше 20: стрелки плюс дробь (“04 /32”).Номер - единственное, что говорит кому-то, где он находится.
На мобильном, проверить размер стрелки. рабочий стол по умолчанию часто является 30px целевой, и доступный минимум для касания 44px.Ударьте его на мобильный точка останова или сбросить стрелки полностью и полагайтесь на swipe.
Шаг 4: Поведение карусели
Это панель, которая решает, правильно ли карусель.
Слайды на вид: установите его три раза. Щелкните значки устройства в верхней части настройки и дать рабочий стол, планшет и мобильный их собственное значение. четыре, два, один является безопасным по умолчанию. этот единственный шаг является отличием между каруселью, которая работает на телефонах и один, который показывает четыре сжатые миниатюры.
Слайды для прокрутки. Установите его в 1 для непрерывного просмотра или сопоставьте слайды для просмотра для пейджинга в стиле страницы. Сопоставление лучше, когда слайды образуют группы; 1 лучше для длинного недифференцированного набора.
Автовоспроизведение. Включите его для декоративных галерей. выключите его, если слайды кликабельны, потому что кто-то потянется за изображением и щелкнет тот, который его заменил.Пауза на ховере закрывает рабочий стол, но на ощупь нет зависания.
Бесконечный цикл требует достаточного количества слайдов. Свайпер клонирует слайды, чтобы подделать обертку, и ей нужно как минимум удвоить ваши слайды на просмотр. четыре изображения на просмотре три будет заметно прыгать. Добавьте изображения или выключите цикл.
Скорость. от 300 до 500 м. Ниже 200 это выглядит как разрез, а не переход; выше 800 человек начинают щелкать дважды.
Макет покровного потока
Переключите раскладку со стандартной на покровную, и боковые направляющие повернутся в сторону в 3D, затемнятся и отступают, оставляя центральный ползун единственным читаемым.
Это подходит для портфолио и тематических исследований, для всего, где одно изображение одновременно является точкой. Это неправильно для всего, что людям нужно сравнивать, потому что весь дизайн существует, чтобы не дать вам смотреть на соседей.
Две настройки, чтобы попасть направо: поверните на 30-40 градусов (прошлое 50, и боковые слайды станут нечитаемыми) и центрированные слайды, или активное изображение окажется заподлицо влево, и композиция рухнет.
Покровный поток - один из четырех стилей, основанных на глубине. Флип, дуга и орбита - это три других, и Элементор 3D карусельный направляющий охватывает то, для чего каждый из них хорош.
Стиль слайдов
Вкладка "Стиль" обрабатывает расстояние между слайдами, радиус границы, тени и состояния зависания.
Обстановка, о которой стоит подумать за секунду разрыв. Нулевой зазор заставляет карусель читаться как одна непрерывная полоса изображения, что подходит для панорамы и неправильно для отдельных элементов. От 16 до 24px - это диапазон, в котором слайды читаются как отдельные карты, а строка не выглядит разреженной.
Эффекты наведения (масштаб, наложение, раскрытие субтитров) применимы ко всему набору, а не к слайду. Держите масштаб ниже 1,05. Слайд, который растет на 15% при наведении, проникает в соседей и выглядит как ошибка макета.
Лайтбокс и подписи
Включите лайтбокс и щелчок по слайду откроет полноразмерное изображение на странице, а его собственное следующее и предыдущее управление пройдет через всю карусель.
Это причина использовать карусель, а не сетку для фотографии. карусель является индексом; лайтбокс является зрителем. заголовки и субтитры переносятся в лайтбокс, поэтому подпись один раз и она работает в обоих местах. если вы хотите, чтобы индекс был виден на странице как миниатюра, а не скрыт за щелчком, это Галерея Слайдер вместо этого виджет, которому нужен Pro.
Одно предостережение: лайтбокс служит полноразмерному изображению, а не миниатюре Если вы установите размер изображения на medium_large для карусели и ваших оригиналов 8MB файлы камеры, лайтбокс по-прежнему будет извлекать 8MB версии. сжатие оригиналов на загрузке, а не только размер дисплея.
Если вы хотите миниатюрную навигацию
Изображение Карусель является одним рядом. нет полосы миниатюр приводя большой предварительный просмотр. если этот двухчастный макет является то, что вы ищете, импортируйте Галерея витринных плит вместо этого один из бесплатных дизайнов в коллекция шаблонов слайдеров: одна пластина под миниатюрной полосой с панелью подписей, которая включает в себя редактируемую таблицу данных о кадрах для места, времени, объектива, диафрагмы, затвора и ISO. Он был создан для фотографии. Та же форма превью плюс миниатюры - это то, что большинство людей имеют в виду, когда просят видеокарусель, и видеокарусель и руководство по слайдерам галереи охватывает эту версию.
Чтобы импортировать его: Master Addons → Widget Builder → Импортировать виджет, перетащите JSON внутрь, и он появится в Elementor в разделе Избранное. Он работает на бесплатном плагине, лицензия Pro не требуется. В той же коллекции есть Слайдер героя постамента, ползунок героя с полным кровотечением и ссылками на ползунки, который также можно бесплатно импортировать. Всего двадцать названных дизайнов, восемь из них бесплатно.
Укладка стрелки
Размер, цвет, фон, радиус границы и положение: внутри карусели, снаружи или перекрывая края.
Стрелкам, расположенным вне карусели, нужно горизонтальное помещение, а на контейнере во всю ширину его нет. зажимают. либо держите контейнер уже смотрового окна, либо расположите стрелки внутри.
Результат
Прежде чем вы это назовете, загрузите страницу на реальный телефон через сотовую связь. Не эмулятор устройства браузера, который изменяет размер окна просмотра, но сохраняет подключение рабочего стола и графический процессор. большинство проблем с каруселью появляются только на реальном оборудовании в реальной сети.
Две ошибки, которые делают карусель медленной
Обслуживание полноразмерных изображений. Покрытая сверху, и она большая Десятислайдовая карусель в Полный размер на фотосайте может быть 20Мб. Та же карусель на large ниже 2 МБ, и никто не может сказать.
Поставьте его над складкой с помощью автозапуска. Карусель становится вашей самой большой довольной краской, а автовоспроизведение означает, что браузер анимирует во время самой чувствительной к производительности секунды загрузки страницы. Если карусель должна быть вверху, выключите автовоспроизведение и оставьте ее неподвижной, пока страница не осядет.
Логотипы - это работа, отличная от фотографий. Они появляются в несовпадающих формах и цветах, и им нужно провести вечер, прежде чем они сядут в ряд прохождение логотипа карусели проходит.
Часто задаваемые вопросы
Есть ли у Элементора бесплатная имиджевая карусель?
Да. бесплатный плагин Elementor включает виджет Image Carousel со стрелками, точками, подписями, лайтбоксом и автоспектаклем.The Master Addons Image Carousel, также бесплатно, добавляет макет coverflow, несколько строк, прогресс, дробь и навигацию по полосе прокрутки, а также стиль для нормальных, наводящих курсор и активных слайдов.Каждая настройка указана в Изображение Документация Карусели.
Как сделать карусель с изображением Элементора отзывчивой?
Устанавливайте слайды для просмотра отдельно на каждой точке останова, используя значки устройств в верхней части настройки, а не оставляя одно значение для всех экранов. четыре на рабочем столе, два на планшете, один на мобильном работает для большинства галерей. проверьте размер стрелки на мобильном тоже, потому что по умолчанию часто ниже 44px доступный тап целевой.
Как добавить подписи к карусели с изображением Элементора?
Подписи поступают из поля "Подпись" или "Описание" медиатеки, а не из текстового поля виджета. Установите источник надписей в настройках контента виджета, затем отредактируйте текст на каждом изображении в медиатеке. Они переносятся в лайтбокс автоматически.
Могу ли я связать каждое изображение в карусели с другим URL-адресом?
Да. Установите поведение ссылки на Пользовательский URL-адрес в настройках контента, и каждый слайд выбирает свой пункт назначения из поля ссылки медиа-элемента. Это то, что люди добиваются, когда ищут карусель изображения с несколькими пользовательскими URL-адресами.
Почему моя имиджевая карусель прыгает, когда она зацикливается?
Недостаточно слайдов для цикла.Swiper клонирует слайды, чтобы создать обертку и требует как минимум вдвое больше слайдов на просмотр. четыре изображения, показанные по три за раз, будут прыгать каждый цикл. добавьте больше изображений или отключите бесконечный цикл.
Почему моя карусель изображений не отображается после того, как я включил кэширование?
Комбинация или отсрочка JavaScript остановила загрузку Swiper до запуска кода инициализации. Исключить swiper, elementor-frontend и jquery-core из JS оптимизации в вашем плагине кэша, и на LiteSpeed добавить их в поле исключения гостевого режима, а также Полное прохождение: Устранение неполадок ползунка Elementor Swiper.
