Плагин карусель wordpress. Карусель с использованием bootstrap. Описание и настройки

Данный плагин использует легкий Jquery скрипт горизонтальной карусели.

Скачали его более 5 тыс. раз, хотя оценка не очень высокая (3.5). Тем не менее, модуль весьма актуальный, поддерживает последнюю версию WordPress 4.2.2. Вы можете задать директорию на сайте, где хранятся изображения для слайдера. К сожалению, возможности добавить описание картинкам и ссылки нет.

Особенности Tiny Carousel Horizontal Slider:

  • Легкая настройка.
  • Поддержка всеми браузерами + адаптивность.
  • Шорткоды для вставки в посты/страницы блога.
  • Поддержка навигации клавишами, пауза при наведении мышкой.
  • Настройка числа изображений и интервала их переключения.

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

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

Скачали модуль более 20 тысяч раз, версия официально поддерживается до 4.1.5 (нормально протестировал на 4.2.2). Общая оценка модулю весьма высокая — 4.7 баллов. Он построен на библиотеках bxSlider и Simple Page Ordering. Работает по аналогии с обычными записями блога, используя таксономию: в отдельном разделе создаете элементы логотипов и задаете им принадлежность в определенному слайдеру (как посты и категории).

Основные преимущества Kiwi Logo Carousel:

  • Поддерживает создание нескольких разных слайдеров на странице, причем для каждого будут свои картинки и свои настройки.
  • Имеется эффект черно-белых логотипов, которые становятся цветными при наведении.
  • Возможность вставки горизонтальной карусели через PHP функцию или шорткод (для постов/статей).
  • Настройка порядка следований логотипов в слайдере путем перетаскивания (Drag and drop) элементов в админке вордпресс.

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

Easy Logo Slider

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

Скачиваний более 8 тысяч, хотя и оценка всего лишь 3.8. Последняя поддерживаемая версия указана WordPress 3.9.6. Работать с модулем достаточно просто, основные его фишки:

  • Простота использования и небольшой вес скрипта.
  • Адаптивность.
  • Автослайдер и пауза при наведении.
  • Возможность добавлять ссылки и описания для логотипов.
  • Создание более одного горизонтального слайдера с разными опциями.

«Проблема» Easy Logo Slider в том, что вы не можете выключить автоматическую прокрутку картинок — то есть карусель работает постоянно. По крайней мере я в настройках этого не нашел. Хотя все остальное (в особенности интерфейс) выглядит достаточно неплохо.

Плагин использует jQuery и библиотеку carouFredsel. Отличительная его — автоматический вывод последних записей из нужной вам категории WordPress. То есть можно сделать горизонтальную карусель с лучшими (избранными) статьями.

У меня на разрабатываемом сайте модуль использовался для отображения из раздела «важных событий». Настраивается Carousel Horizontal Posts Content Slider легко, но вы сможете использовать его только один раз. Скачали плагин более 10 тысяч раз, оценка — 4 из 5-ти. Обновлялся в этом году и поддерживает версию вордпресс 4.1.5 (я тестировал на 4.2.2).

Основные фишки плагина:

  • Адаптивность, поддержка всех браузеров.
  • Наличие стрелочек навигации или пагинации (+настройки).
  • Есть шорткод для вставки в посты и страницы.
  • Возможность локализации.
  • Поддержка мультисайтовости и SEO, хотя, если честно, непонятно в чем это проявляется.
  • Задание размеров элементов карусели (здесь в отличии от Kiwi Logo Carousel даже при фиксированных размерах блоков адаптивность отлично работает).
  • Наличие эффектов для слайдера.

Есть для модуля и платная Pro версия с гораздо большим числом настроек, но с ней я не работал. Если же резюмировать возможности Carousel Horizontal Posts Content Slider, то понравилась адаптивность, а минусом есть отсутствие возможности создать несколько горизонтальных каруселей. Также не понравилось, что отступы между некоторыми элементами в шаблоне заданы с тегом BR, поэтому пришлось их удалять из самого PHP файла (а это не есть хорошо).

Logo Slider

Чуть было не забыл про модуль, с которого все начиналось. Плагин Logo Slider достаточно популярный (10тыс. загрузок) и актуальный (подходит для WP 4.2.2) с высокой оценкой в 4.3 балла.

В принципе, по функциональности мне здесь все подходило:

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

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

А не подошел мне модуль потому что для горизонтальной карусели логотипов мне нужно было чтобы «перелистывание» происходило ровно на 1 логотип влево, а здесь (насколько я помню) сменялось сразу несколько. Теоретически можно было покопаться в коде плагина и этот момент подправить, но я выбрал поиск другого решения. Кстати, в бесплатной версии сможете создать всего лишь один слайдер логотипов.

Slick

Напоследок хотелось бы сказать о разных скриптах и библиотеках.

Некоторые из плагинов выше (и большинство других в репозитории WordPress) использует готовые скрипты и библиотеки. Slick — одно из таких решений. Если вы хорошо разбираетесь в веб-разработке, то можете попробовать подключить данный скрипт напрямую в вордпресс через шаблон. Если умеете создавать WordPress плагины, то и вовсе сможете разработать свое уникальное решение. Я, в принципе, находил пару плагинов с использованием библиотеки Slick, но количество скачивания в 50-100 раз, мягко говоря, не впечатляет. У такого решения могут быть глюки, проблемы с обновлением или дыры безопасности.

Итого. Для разрабатываемого сайта я использовал 2 модуля. Слайдер логотипов реализовал с помощью плагина Kiwi Logo Carousel, хотя там и была проблема с адаптивностью. Также для этой цели можно смело использовать Logo Slider. С задачей выводить горизонтальную карусель из выбранных постов блога справился модуль Carousel Horizontal Posts Content Slider. Пришлось подправить немного отображение его элементов на сайте, но зато с адаптивностью здесь никаких проблем.

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

Здравствуйте друзья!

В последнее время уже несколько раз ко мне обращались с вопросом, какой плагин позволяет сделать ротатор картинок на сайте (для WordPress).

Сам я ротатор не использую, но людям то помочь надо. Иначе зачем я тогда сделал этот сайт.

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

Это плагин для WordPress — «Веселая карусель».

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

Пример работы плагина можно посмотреть .

Это очень удобно.

А теперь давайте разберемся, где его взять и как установить и настроить.

1. Установка плагина.

Устанавливается плагин стандартно методом переноса папки с файлами в папку plugins/ вашего сайта. Подробнее о способах установки плагинов на движок WordPress можно прочитать в .

2. Настройка плагина.

Итак, мы скачали и установили плагин на наш сайт. И не забыли активировать его!!!

Теперь заходим в админ панель нашего сайта. В самом низу главной панели инструментов появился пункт «RC Plugins» (там еще забавный значок гамбургера). Вот туда и заходим.

Мы попадаем в панель настроек плагина.

А теперь по порядку.

Первое поле: «Искать картинки в папке». В нем записан путь к папке, в которой будут храниться картинки. По умолчанию он предлагает нам название папки, но тут же пишет, что ее не существует. Нужно ее создать.

Думаю, что каждый уже умеет пользоваться программой FileZilla. Заходим на сайт и создаем папку в том месте, которое указано в поле настроек плагина.

Следующее поле — размер картинки. Задаем размер картинки в пикселях. А теперь важный момент.

Если Вы хотите, чтобы Ваши картинки хорошо смотрелись (не растягивались и не сжимались), то Вам нужно будет создавать картинки для ротатора именно такого размера, который Вы указали здесь.

Следующая настройка — имя картинки. Здесь есть несколько вариантов именования картинки, чтобы она привязалась к определенному посту.

Следующая настройка — «Добавить к . Тут можно добавить стилевое оформление для ротатора. Чтобы не копаться в стилевых файлах. Можно прямо в это поле прописать все стили.

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

После изменения настроек не забываем сохранять их.

3. Вставка кода ротатора на сайт.

После того, как мы установили плагин, настроили его, нам осталось только указать движку, где конкретно показывать ротатор.

Для этого в нужном месте -кода нашего сайта вставляем следующий код:

Вот и все. Теперь у Вас на сайте есть стильный ротатор.

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

Для товаров Woocommerce вы сможете настроить отображение цены, рейтинга, заголовка, кнопки “Добавить в корзину” , скидки. Можно добавить кнопку для быстрого просмотра товара в лайтбокс окне. Можно добавить товары из категории, метки или выбрать определённые товары.

Плагин карусель слайдер WordPress

Установить плагин Carousel Slider вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Далее, после установки и активации плагина, перейдите на страницу: Carousel Slider – All Slides . Здесь будут отображаться все созданные карусели. Чтобы создать новую карусель, нажмите вверху на кнопку – Add New .

Далее, на странице создания карусели, возле параметра “Slide Type” , вам нужно выбрать, что будет отображаться в карусели, записи, товары, видео или изображения. Я покажу вам как настроить карусель для товаров Woocommerce.

Query Type, здесь вам нужно выбрать откуда будут выводиться товары, из категорий, меток, либо сами выберите определённые товары.

– Product per page, укажите сколько товаров должно отображаться в карусели.

– Show Title, показывать заголовок товара.

– Show Price, показывать цену товара.

– Show Cart Button, показывать кнопку “Добавить в корзину” .

– Show Sale Tag, показывать скидку товара.

– Show Wishlist Button, показывать кнопку “Добавить в избранное” , если у вас установлен плагин .

– Show Quick View, показывать кнопку “Быстрый просмотр” .

– Title Color, выберите цвет заголовка товаров.

– Button Background Color, цвет фона кнопок.

– Button Text Color, цвет текста в кнопке.

– Carousel Image size, можно выбрать размер изображений.

– Lazy load image, можно включить функцию постепенной загрузки изображений.

– Slide By, по умолчанию в карусели сдвиг слайдера на один товар.

– Margin Right(px) on item, размер границ карусели в пикселях.

– Inifnity loop, можно продублировать последний и первый элементы, чтобы получить иллюзию петли.

– Navigation, включить навигацию.

– Dots, включить отображение точек в карусели, которые показывают количество товаров.

– Navigation & Dots Color, цвет пуль (точек).

Navigation & Dots Color: Hover & Active, цвет активных пуль и при наведении.

– Autoplay, включить авто-воспроизведение карусели.

– Autoplay Timeout, задержка перед авто-воспроизведением.

– Autoplay Speed, скорость авто-воспроизведения.

– Autoplay Hover Pause, включить паузу при наведении.

– Colums, количество колонок в карусели.

– Colums: Desktop, количество колонок на компьютере.

– Colums: Small Desktop, количество колонок на маленьком компьютере.

– Colums: Tablet, количество колонок на планшете.

– Colums: Small Tablet, количество колонок на маленьком планшете.

– Colums: Mobile, количество колонок на мобильных устройствах.

Укажите вверху название карусели и нажмите на кнопку – Опубликовать .

Плагинов для онлайн торговли. Он поможет вам создать успешный онлайн магазин всего за несколько часов.

Создавая свой сайт с собственным дизайном с нуля, чтобы получить все необходимые онлайн магазину функции, придётся заплатить сотни долларов разработчикам, но с плагином WooCommerce все, что требуется - выбрать провайдера хостинга и тему для сайта .

Плагин WooCommerce полностью бесплатен, но, возможно, вы пожелаете использовать и другие плагины, чтобы расширить возможности своего магазина.

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

WooCommerce Product Slider

Начнём с этого бесплатного слайдера товаров WooCommerce . Он полностью , поэтому будет идеально работать на любых устройствах.

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

Стоимость: Бесплатно

WooCommerce Product Slider/Carousel/Grid

Это премиум WooCommerce слайдер товаров , который заставит ваш магазин выглядеть потрясающее.

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

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

Стоимость: $22

WooSlider - слайдер / карусель товаров Woocommerce

Этот мощный WooCommerce слайдер товаров создан разработчиками самого плагина WooCommerce. С этим плагином можно разместить слайдер как в онлайн магазине, так и в WordPress посте. Можно настраивать количество товаров для отображения в слайдере, а также разместить кнопку «добавить в корзину». Можно настраивать дизайн слайдера, добавлять категории товаров и вставлять ссылки в названия предметов.

Внимание! Данный плагин - дополнение к , который стоит $49.00–$149.00.

Стоимость: $29.00–$99.00

Woo Slider

Woo Slider создаст для вас красивую ленту с товарами . Можно легко добавить плагин, используя редактор WordPress, виджет или визуальный конструктор страниц.

Плагин предоставляет три готовых к использованию макета, а в ленте можно отображать как изображения, так и видео . Благодаря «ленивой загрузке » лента не увеличит время загрузки сайта. Также присутствует нумерация страниц и реализована навигация.

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

Стоимость: $19

Yith WooCommerce Product Slider

Yithemes уже долгое время создаёт дополнения для WooCommerce. Эти плагины и темы для онлайн торговли современные и всегда обновлённые, и этот плагин не исключение.

Премиум версия этого слайдера имеет

Заключение

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

Все вышеназванные плагины от WooCommerce достаточно хороши, чтобы поднять ваш онлайн магазин на новый уровень.

WordPress Carousel is the most powerful and user-friendly WordPress Carousel plugin to create beautiful carousels with Images, Posts, WooCommerce Products etc. This plugin will allow you simply select images from WordPress media library, drag and drop them into place and also supports WordPress posts and WooCommerce products. It’s fully responsive, highly customizable and works smoothly on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Edge.

We believe that you shouldn’t be a coder or hire a developer to create a carousel for your WordPress site. That’s why we built the WordPress Carousel plugin that’s both EASY and POWERFUL.

WordPress Carousel 2.0

WordPress Carousel 2.0 has completely been rebuilt and this provides you now many improvements and new amazing features.

You’ll be able to display

    Image Carousel – Create beautiful image carousels with uploading images via WordPress regular media gallery. Easily drag and drop image slides.

    Post Carousel – Display WordPress latest posts in the carousel with post title, image, excerpt, date, author etc.

    WooCommerce Product Carousel – Display latest WooCommerce products carousel. Show/hide the product name, image, price, rating, add to cart button etc.

Key Feature List

  • Fully Responsive and Touch-friendly.
  • Lightweight, Fast & Powerful.
  • Shortcode Generator.
  • Extremely User-friendly Admin Panel.
  • Create Carousel using images from media gallery, posts, products etc.
  • Drag and drop image slides Re-ordering.
  • Multiple Carousels. (Create unlimited carousels into same page)
  • Multisite Supported.
  • Set border for image slide.
  • AutoPlay on/off.
  • AutoPlay Speed Control.
  • Stop on hover carousel.
  • Infinite looping for the carousel.
  • Show/hide Navigation and Pagination dots.
  • Navigation & Pagination dots color.
  • Unlimited color and styling options.
  • Control carousel columns on different devices.
  • Display random order.
  • Unique settings for each carousel.
  • Touch Swipe options.
  • Mouse Draggable enable or disable.
  • Multilingual Ready.
  • RTL Supported.
  • Widget Supported.
  • Compatible with any theme.
  • Advanced Settings to enqueue or dequeue Scripts/CSS.
  • Custom CSS field to override styles.
  • Developer friendly & easy to customize.
  • SEO friendly & optimized for speed.
  • Support all modern browsers: IE, Firefox, Chrome, Safari, Opera, Edge etc.
  • Documentation and Video Tutorials.
  • Fast and Active Support.
  • And much more options.

For fast support, features request, and bug reporting

WordPress Carousel Pro

Premium Support and Documentation

The premium version of the plugin entitles you to get fast, friendly, and priority support with replies posted within 24 hours (without holidays). Please submit a support ticket here. This will create a support thread in our support portal.

Author

Скриншоты

Установка

MINIMUM REQUIREMENTS

  • PHP 5.6 or later
  • MySQL 5.6 or later
  • WordPress 4.3 or later

This section describes how to install the plugin and get it working

AUTOMATIC INSTALLATION (EASIEST WAY)

To do an automatic install of WordPress Carousel, log in to your WordPress dashboard, navigate to the Plugins menu and
click Add New.
In the search field type «WordPress Carousel». Once you have found it you can install it by simply
clicking «Install Now» and then «Activate».

MANUAL INSTALLATION

  • Download wp-carousel-free.zip
  • Navigate to the ‘Add New’ in the plugins dashboard
  • Navigate to the ‘Upload’ area
  • Select wp-carousel-free.zip from your computer
  • Click ‘Install Now’

Using FTP

  • Download wp-carousel-free.zip
  • Extract the wp-carousel-free directory to your computer
  • Upload the wp-carousel-free directory to the /wp-content/plugins/ directory
  • Activate the plugin in the Plugin dashboard
Where can I report bugs?

If you find a bug, please report it in our active support forum. You will be replied once the issue is resolved.

I’d like access to more features. How can I get them?

You can get access to more features when you purchase a license of the plugin. Purchasing a license of WordPress Carousel Pro gets you to access the full version of WordPress Carousel, automatic lifetime updates, and support.

Is WordPress Carousel Multilingual Ready?

Yes, WordPress Carousel is 100% translation ready and tested with WPML , Polylang , qTranslate-x , GTranslate , Google Language Translator , WPGlobus etc.

Is WordPress Carousel compatible with WordPress multisite?

Yes, WordPress Carousel works perfectly with WordPress multi-site network.

How to use ‘WordPress Carousel’ in WordPress 5.0 Gutenberg Block Editor

Adding a WordPress Carousel (Image Carousel, Post Carousel, Product Carousel) using the WordPress 5.0 Block Editor is pretty straight-forward. You can paste the generated shortcode into a ‘Paragraph Block’ or use the ‘Shortcode Block’. It works nicely as classic editor.

Do you Like this Plugin and want to encourage us for improvement?

Please give the plugin 5 stars rating and your precious appreciation will help us to make it much great in the future.

Понравилась статья? Поделиться с друзьями: