Как создать вертикальную карусель изображений на WordPress с помощью Elementor

Muneeb Учебные пособия по WordPress Jan 21, 2022

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

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

Как создать вертикальную карусель изображений Elementor

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

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

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Затем дайте столбцу вертикальное имя столбца как класс.
Установите для этого столбца пространство для виджетов равным 0 в настройках столбца и макета .

Add an image element to that column and choose the picture you made. Добавьте элемент изображения в этот столбец и выберите изображение, которое вы сделали. Assign the class carousel vertical to the picture element . Назначьте класс carousel vertical элементу изображения .

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

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

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

5 лучших плагинов карусели изображений

1. Опубликовать карусель для Elementor

Post Carousel For Elementor от iThemelandCo — это дополнительный плагин Elementor, который позволяет создавать удивительно креативные медиа-карусели с готовыми макетами каруселей. Плагин отлично интегрируется с Elementor и предлагает 19 готовых макетов. Эти макеты полностью настраиваются и могут быть легко настроены в соответствии с вашими потребностями с помощью механизма перетаскивания Elementor.

Карусель продуктов для Elementor

Product Carousel For Elementor — это еще один дополнительный плагин Elementor, разработанный специально для магазинов электронной коммерции, чтобы демонстрировать свои продукты в карусели. Плагин предлагает 12+ элементов управления каруселями, таких как автовоспроизведение, слайд для прокрутки, пауза при наведении и т. д. Плагин очень отзывчив на всех типах устройств, и вы можете создать столько каруселей, сколько захотите. Более того, это 100% многоязычный плагин, а это значит, что он будет работать, даже если ваш сайт переведен на другой язык.

3. Быстрая карусель для Elementor

Fast Carousel For Elementor — это дополнительный плагин для Elementor, который утверждает, что достаточно быстр, чтобы построить для вас карусель за минуту. Как бы впечатляюще это ни звучало, он также предлагает различные типы галерей, а также более десяти уникальных стилей. Плагин оснащен более чем пятью элементами управления каруселью, а также предлагает настраиваемые параметры цвета для каждой карусели. Для быстрого решения это может быть лучшим выбором для карусели изображений.

Мы надеемся, что вы нашли это руководство полезным для улучшения вашего веб-сайта. Обязательно присоединяйтесь к нам на наших Facebook и Twitter , чтобы продолжать получать учебные пособия, которые сделают ваше путешествие по WordPress веселым и легким.

Divi WordPress Theme