Привет. На повестке сегодняшнего дня еще один симпатичный и удобный слайдер — карусель. 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).
Сам я ротатор не использую, но людям то помочь надо. Иначе зачем я тогда сделал этот сайт.
Короче, я сделал небольшой анализ различных плагинов и нашел то, что нужно.
Это плагин для WordPress — «Веселая карусель».
Мало того, что он красиво перелистывает картинки на Вашем сайте, так он еще и дает краткое описание статьи, к которой относится картинка, а также если Вы кликните мышкой по картинке, то перейдете на саму статью.
Пример работы плагина можно посмотреть .
Это очень удобно.
А теперь давайте разберемся, где его взять и как установить и настроить.
1. Установка плагина.
Устанавливается плагин стандартно методом переноса папки с файлами в папку plugins/ вашего сайта. Подробнее о способах установки плагинов на движок WordPress можно прочитать в .
2. Настройка плагина.
Итак, мы скачали и установили плагин на наш сайт. И не забыли активировать его!!!
Теперь заходим в админ панель нашего сайта. В самом низу главной панели инструментов появился пункт «RC Plugins» (там еще забавный значок гамбургера). Вот туда и заходим.
Мы попадаем в панель настроек плагина.
А теперь по порядку.
Первое поле: «Искать картинки в папке». В нем записан путь к папке, в которой будут храниться картинки. По умолчанию он предлагает нам название папки, но тут же пишет, что ее не существует. Нужно ее создать.
Думаю, что каждый уже умеет пользоваться программой FileZilla. Заходим на сайт и создаем папку в том месте, которое указано в поле настроек плагина.
Следующее поле — размер картинки. Задаем размер картинки в пикселях. А теперь важный момент.
Если Вы хотите, чтобы Ваши картинки хорошо смотрелись (не растягивались и не сжимались), то Вам нужно будет создавать картинки для ротатора именно такого размера, который Вы указали здесь.
Следующая настройка — имя картинки. Здесь есть несколько вариантов именования картинки, чтобы она привязалась к определенному посту.
Следующая настройка — «Добавить к . Тут можно добавить стилевое оформление для ротатора. Чтобы не копаться в стилевых файлах. Можно прямо в это поле прописать все стили.
Ну и последние настройки — настройки отображения. Там мы указываем, какие картинки использовать в ротаторе и сколько их использовать. Там нет ничего сложного — разберетесь сами.
После изменения настроек не забываем сохранять их.
3. Вставка кода ротатора на сайт.
После того, как мы установили плагин, настроили его, нам осталось только указать движку, где конкретно показывать ротатор.
Для этого в нужном месте -кода нашего сайта вставляем следующий код:
Вот и все. Теперь у Вас на сайте есть стильный ротатор.
Если вы хотите показать отзывы клиентов, последние записи в блогах, лучшие изображения или представить членов своей команды, для этого существуют определенные плагины 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 столбцов)
- и другие функции.
Не все слайдеры и слайд-шоу подходят для сайта. Порой они слишком большие, и закрывают собой всю остальную информацию. На коммерческих проектах, установленных на WordPress, лучше размещать компактные слайдеры, которые вместились бы в небольшой части страницы, при этом функционально переключались и не нагружали сайт.
Под это описание подходит карусель — это скрипт настраиваемого слайдера, который можно разместить в любой части веб-сайта.
Разумеется, самостоятельно закатывать рукава и печатать скрипт вы не будете — это долго, сложно и недостижимо для новичка. Потому вам лучше использовать плагин JQuery — модуль, который автоматически интегрирует JavaScript в структуру HTML-сайта. Существует множество по-разному оформленных дополнений для добавления слайдера карусель на сайт WordPress. Рассмотрим лучшие из них.
Slick
Разработчики Slick уверены, данный плагин удовлетворит любые потребности вебмастера. Если вам нужен слайдер карусель, то указанный модуль полностью удовлетворит ваш запрос. Им легко управлять — элементы в слайд-лист можно перетаскивать прямо с рабочего стола или папки. К тому же, плагин удобно отображается посетителям вашего сайта WordPress — с анимацией затемнения, либо с автоматической прокруткой. Модуль не займет много места на сайте, и работает оптимизировано, чтобы страницы со слайдами не загружались слишком долго.
Owl Carousel
Недавно вышла уже вторая версия инструмента — плагин Owl Carousel 2.0. Он подходит для тех, кто не любит предварительно подготавливать изображения для загрузки в слайдер карусель. Дополнение автоматически выравнивает пропорции картинок, чтобы пользователь мог видеть плавные, ровные слайды. Данный модуль практически не изменит время ответа страницы на запрос, так как в нем предусмотрена функция отложенной инициализации — изображения начинают загружаться только тогда, когда пользователь их просматривает.
Плагин Owl Carousel для WordPress отлично адаптируется под мобильные устройства — равномерно отображает даже самые большие картинки, при этом сохраняя целостность шаблона. Помимо картинок, вы сможете загрузить в карусель видео и анимацию.
Простой плагин для бесплатного добавления слайдера карусель на сайт WordPress. В нем нет ничего особенного по сравнению с другими модулями, но и явных недостатков он не имеет. Работает прилежно, функционально и корректно отображает картинки в слайдах. При помощи него можно создавать не только карусель, но и галереи фото. А если того требует расположение элементов, можно создать вертикальную прокрутку слайдов. Распространяется плагин Silver Track бесплатно.
Мощный плагин, которому сложно найти конкурента. Его преимущества:
- подстраивается под любую ширину экрана;
- формат контента в слайдере карусель можно «миксовать»;
- не нужно копаться в CSS для изменения стиля;
- весит менее 8 Кб, что никак не отображается на работе сайта WordPress;
- построен по последним технологиям библиотек JQuery;
- есть интегрированный прелоадер (индикатор прогресса загрузки изображения);
- пользователь может возвращаться в начало, в конец или на определенную часть слайд-шоу;
- автоматическая прокрутка;
- можно просматривать одиночные изображения из слайдера карусель на полный экран.
3D Carousel Gallery
Если вам уже надоели обыкновенные плоские слайдеры, тогда можете установить себе на сайт WordPress трехмерную карусель. Предоставляется плагин бесплатно. Причем каждый пользователь может внести в его код правки. В итоге, вы получите слайдер с плавным трехмерным эффектом перехода. Вот только настроек у этого модуля практически нет. Так что без знания языков программирования вам его не изменить.
3D Carousel Using TweenMax.js & jQuery
С этим слайдером не сравнится ни один из вышеперечисленных. Он позволяет создать по-настоящему 3D карусель. Пользователь сможет один поворотом мыши вращать по кругу отдельные слайды. Причем вращать их можно не только влево и вправо, но и вниз/вверх. Подходит для динамичного просмотра изображений на WordPress, если вам нужно не показать детали, а просто скрасить шаблон сайта какой-нибудь примочкой. Единственный минус плагина для WordPress в том, что он по-разному работает на различных браузерах и устройствах. Лучшая совместимость у этого 3D-слайдера с браузерами Хром и Сафари.
Это один из самых простых, и при этом популярных плагинов, основанных на технологии Bootstrap. С ним вы сможете установить на главную широкоформатный слайдер, который будет автоматически переключать квадратные слайды. По бокам интерфейса есть стрелки для переключения, и модуль эффективно адаптируется под другие устройства.
Это усовершенствованная версия предыдущего плагина для WordPress. Подходит для тех, кому надоела одна большая меняющаяся картинка на фоне главной страницы. Усовершенствование слайдера заключается в том, что он позволяет добавлять в один слайд сразу много картинок. Под каждым изображение можно добавить заголовок и краткое описание. Таким образом вы сможете эффектно и с изюминкой ознакомить пользователей с вашей продукцией и текущими акциями. Скорость автопрокрутки настраивается.
Это крошеный слайдер карусель, рассчитанный скорее для размещения в постах, нежели на главной странице. Tiny Circleslider отличается от обыкновенных прямоугольных и квадратных каруселей — это круглый модуль. И листается он совсем по-другому принципу — пользователи нажимают на номера слайдов, которые размещены по кругу. Либо вращает красный кружок, быстро переключая слайды между собой. На тех, кто с таким еще не сталкивался, данный плагин обязательно произведет должное впечатление, и ваш сайт WordPress запомнят!
Слайдер для размещения среди контента. Отлично подходит для добавления в статьи с пошаговыми уроками, чтобы аккуратно загрузить обучающие картинки. Хоть с виду это и маленький слайдер, в него можно вставлять крупные изображения. При наведении на большой вариант картинки в слайде, изображение автоматически увеличится в заданной области. Размещать слайдер можно как горизонтально, так и вертикально. Работает со всеми веб-браузерами, а также отлично отображается на смартфонах и других устройствах iOS и Android.
Wowslider
Слайдер WordPress, который содержит в себе более 50 различных анимационных эффектов переключения слайдов. Достаточно установить данный модуль, чтобы карусель на вашем сайте всегда была уникальной и неповторимой. Сможете добавить функцию предварительного просмотра слайда при наведении на пункты, описания картинок, визуальные эффекты перехода и многое другое. Wowslider предоставляется бесплатно!
Как выбрать правильную карусель для своего сайта WordPress?
Выбранный вами слайдер должен работать со всеми устройствами. Правильно определите размер плагина: для заголовка нужны большие слайды, а в постах — маленькие. Следите, чтобы модуль не тормозил сайт, и не добавляйте слишком много каруселей на страницы.
