Привет. На повестке сегодняшнего дня еще один симпатичный и удобный слайдер — карусель. TouchCarousel — Posts Content Slider for WordPress — за этим довольно длинным названием прячется именно тот слайдер который мне так был необходим в одном из проектов. Давайте посмотрим, что он из себя представляет и что умеет.

TouchCarousel — гибко и в тоже время, очень просто настраиваемый WordPress , предназначенный, как мне видится, не столько в качестве основного для главной страницы сайта, а скорее для вставки в отдельные записи, страницы, сайдбары, футеры. Хотя в принципе, ничего не мешает вывести его и в качестве основного слайдера на главной. Лично мне в свое время, он был необходим именно для вывода контента (записей) в сайдбаре строго по рубрикам. И со своей задачей он прекрасно справился.

Давайте перечислим основные возможности и достоинства TouchCarousel

• Выводит как картинки так и записи с гиперлинками.
• Перелистывание слайдов возможно как автоматически, так и просто движением мышки (Mouse drag navigation ).
• Слайдер имеет четыре заготовленных заранее формы и пять оформления.
• Кроме этого вы легко можете создать свою собственную форму используя CSS. Для тех кто не знаком с этим делом, можно просто изменить параметры в одном их заготовленных вариантов и сохранить их как свой.

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

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

Описание и настройки

После установки в меню админки появится пункт TouchCarousel с единственной страницей — списком всех ваших будущих . Создаем вверху страницы новый слайдер — Add New и сразу переходим к его настройкам.

Задаем будущее имя.

Post type — выбираем целевые слайды показа. Категория, отдельные посты или страницы порфолио.

Post taxonomies — зависит от того что вы выбрали в предыдущем варианте. Выбираете категорию (категории тут, кстати, услужливо появляются сами, если они конечно есть), в других случаях, выводите соответствующие предметы портфолио или даже вашего интернет магазина.

Max posts to include – максимальное количество картинок для показа в слайдере.

Carousel item layout type:

Всего представлено четыре типа заранее заготовленных форм слайдера

Полная картинка с заголовком внизу 620×350 Картинка с текстом 620×270

Маленькая картинка с заголовками 226×70

И просто маленькая квадратная картинка с заголовком 170×170

Есть еще последний тип предназначенный для собственного варианта.

Внизу есть два окна Item layout HTML и Item layout CSS в которых вы можете легко внести любые правки и дополнительные настройки.

Справа находится панель General Options с множеством мелких настроек для созданного слайдера.

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

Для вставки слайдера в текстовый в сайдбаре не забудьте поставить галочку в чекбоксе Preload files в General Options .

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

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

Подробное видео с примерами.

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

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

Слайдер для WordPress VG PostCarousel

VG PostCarousel – это слайдер для WordPress в виде карусели, который выводит посты по определённому признаку. Плагин показал себя как простое в использовании и креативное творение авторов. Для начала работы его необходимо скачать, установить и активировать. После этого у вас в консоли появится новый пункт «VG PostCarousel». Чтобы добавить новую карусель постов, нажмите «VG New Carousel».

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

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

Ниже будет секция настроек с тремя вкладками. Рассмотрим эти опции.

• Global settings. Как понятно по названию, это самые главные общие настройки слайдера WordPress. Можно настроить цветовые параметры, отступы от элементов, размер карусели. Также здесь можно присвоить свой стиль CSS к слайдеру.
• Carousel settings. Здесь настройки самой карусели. Надо заметить особую возможность адаптивности данного слайдера. Так, в данной вкладке настроек можно выбрать самостоятельно, какой размер будет иметь слайдер на разных экранах устройств. О том, насколько важна адаптивность для современного продвижения сайта, вы можете узнать . Кроме того в этой вкладке можно настроить скорость слайдера, пагинацию, наличие или отсутствие тех или иных элементов управления и прочее.
• Post settings. Здесь настраиваются посты, которые будут выводиться в карусели. Можно определить, из какой рубрики брать записи, а также выбрать статус поста. Примечательно, что можно демонстрировать запланированные записи, таким образом, интриговать посетителей интересными материалами. Также здесь настраивается количество записей, и наличие или отсутствие разнообразных элементов.

(2 оценок, среднее: 5,00 из 5)

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.

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

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

И с каруселями та же самая история, почти все карусели уже с дизайном. А вам практически всегда нужна чистая карусель, которую потом можно оформить так как задумал дизайнер.

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

jQuery плагин чистой и мощной карусели

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

Его можно оформлять как угодно .

И так, вот этот плагин: Owl Carousel.

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

1. Подключаем jQuery , если он еще не подключен, например так

2. Копируем файлы плагина в папку с сайтом

• Распаковываем
• Копируем на сайт папку owl-carousel

3. Подключаем эти файлы к сайту:

4. Добавляем на страницу код

1 2 3 4 5 6 7 8 9 10 11 12 13 14

5. Запускаем плагин

$(document).ready(function(){ // Находим блок карусели var carousel = $("#carousel"); // Запускаем плагин карусели carousel.owlCarousel(); });

6. Оформляем

/* Основной блок */ .owl-wrapper-outer { border: 1px solid #777; border-radius: 5px; overflow: hidden; background: white; } /* 1 квадратик карусели */ .carousel-element { padding: 30px; text-align: center; font-size: 300%; border-right: 1px solid #777; }

Кнопки «Назад» и «Вперед»

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

1. Добавляем сами кнопки

Назад Вперед

2. Присоединяем кнопки к плагину карусели

После запуска плагина добавляем код

// Назад // При клике на "Назад" $("#js-prev").click(function () { // Запускаем перемотку влево carousel.trigger("owl.prev"); return false; }); // Вперед // При клике на "Вперед" $("#js-next").click(function () { // Запускаем перемотку вправо carousel.trigger("owl.next"); return false; });

Теперь при клике на «Назад» и «Вперед» будет срабатывать перемотка.

Маркеры

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

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

// Запускаем плагин карусели carousel.owlCarousel({ // Точки под каруселью pagination: true });

/* Блок с точками */ .owl-pagination { text-align: center; /* Выравниваем точки по-середине */ } /* 1 Точка */ .owl-page { width: 10px; height: 10px; border: 1px solid #777; display: inline-block; background: white; margin: 10px; border-radius: 5px; } /* Активная точка */ .owl-page.active { background: #777; }

Чтобы показывался только 1 блок

Это довольно часто нужно, для этого добавляем следующий параметр

// Запускаем плагин карусели carousel.owlCarousel({ singleItem: true, // Показывать только 1 блок на всю ширину });

Разное количество блоков на разных устройствах

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

// Запускаем плагин карусели carousel.owlCarousel({ // Количество отображающихся блоков // в зависимости от устройства (ширины экрана) // Количество блоков на больших экранах items: 10, // 5 блоков на компьютерах (экран от 1400px до 901px) itemsDesktop: , // 3 блока на маленьких компьютерах (экран от 900px до 601px) itemsDesktopSmall: , // 2 элемента на планшетах (экран от 600 до 480 пикселей) itemsTablet: , // Настройки для телефона отключены, в этом случае будут // использованы настройки планшета itemsMobile: false });

А что за сюрприз то?

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

Я открываю, смотрю футболка. Разворачиваю. Вот блин, что за тупость. Я вижу на этой футболке 3 своих фотографии. Одеваю футболку и все начинают ржать, получилось тупо и весело.

Данный плагин использует легкий 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. Пришлось подправить немного отображение его элементов на сайте, но зато с адаптивностью здесь никаких проблем.

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