Привет. На повестке сегодняшнего дня еще один симпатичный и удобный слайдер — карусель. 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 для показа слайдеров и каруселей.

Но прежде чем мы представим 8 самых горячих плагинов на рынке Envato в этом году, возможно, следует уточнить разницу (или ее отсутствие) между плагином слайдера и карусели. Некоторые говорят, что между ними мало различий, так как они оба реализуют одинаковые функции: отображают несколько изображений в формате слайд-шоу, предлагая некоторые элементы управления, такие как стрелки на предыдущие/следующие изображения, эскизы и иногда эффекты перехода между слайдами.

Другие настаивают на том, что, важное различие между ними состоит в том, что слайдер скользит по горизонтали или по вертикали, а карусель поворачивает изображения на оси, причем изображение всегда обращено к зрителю. В то время как споры продолжаются, мы рассмотрим оба варианта как взаимозаменяемые и займемся описанием 8-ми лучших плагинов слайдеров и каруселей 2018 года на CodeCanyon.

1. Foxy - WooCommerce Product Image Gallery Slider Carousel

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

Особенности включают:

• более 150 различных вариантов
• полностью адаптивный
• режим предварительного просмотра
• 8 шаблонов
• и другие функции.

2. WP Slick Slider и Image Carousel Pro

Пользователи Visual Composer захотят серьезно рассмотреть плагин WP Slick Slider. Имея почти 100 предопределенных макетов, вы найдете все, что захотите ничего не кодируя.

Особенности включают:

• адаптивность и прокрутка
• перетаскивание мышью и бесконечный цикл
• мощный инструмент генерации коротких кодов.

Некоторые из стилей дизайна включают:

• переменную ширину
• режим центровки.

3. Master Slider - Touch Layer Slider WordPress Plugin

Неудивительно, почему Master Slider является многолетним фаворитом на CodeCanyon. Адаптивный сенсорный слайдер предлагает более 70 шаблонов, которые легко настраиваются и просты в использовании.

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

Другие замечательные функции:

• визуальный конструктор drag-and-drop
• легко отображать галерею изображений как слайдер
• способность загружать и отображать галереи из таких сервисов, как Flickr и WooCommerce
• и еще больше функций.

4. Slider Pro - Responsive WordPress Slider Plugin

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

Интересная функция – это функция глубокой привязки, в которой каждое изменение слайда обновит URL-адрес в навигационной панели браузера с соответствующим URL-ом.

Другие замечательные функции:

простая настройка

плавная анимация

несколько макетов

и другие.

5. RoyalSlider - Touch Content Slider for WordPress

Самый загруженный слайдер в CodeCanyon, Royal Slider для WordPress упакован неотразимыми функциями. Используемый такими известными компаниями, как Coca Cola и Land Rover, этот плагин делает практически все, что вы захотите от слайдера.

Наиболее привлекательной особенностью является полноэкранная функция с поддержкой полноэкранного HTML5. Идеально подходит для показа фотографии высокого разрешения.

Другие замечательные функции:

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

6. Logos Showcase - Multi-Use Responsive WP Plugin

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

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

Другие функции:

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

7. All Around - Responsive WordPress Content Slider / Carousel, Creative and Fun Sliding Plugin

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

Он даже поддерживает видео!

Особенности плагина:

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

8. Ultra Portfolio - WordPress

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

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

Другие замечательные функции:

• неограниченные макеты
• интеграция WooCommerce
• интеграция Google Font
• возможность управления количеством столбцов для различных разрешений экрана и их ширины. (2, 3, 4, 5 или 6 столбцов)
• и другие функции.

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

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

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

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

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 своих фотографии. Одеваю футболку и все начинают ржать, получилось тупо и весело.

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

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

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

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

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

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

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

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

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