Привет сообществу!

В данной заметке вы узнаете, что такое Multiple Formtabs и как создать конфигурацию с разным набором данных. Ну и конечно же создадим с вами слайдер у которого будут разные типы слайдов, а в конце вас ждёт очень интересная история которую я долго не решался кому либо рассказать (если конечно вам интересно, но история интересная - поверьте). И так, примеры слайдов:

• Изображение на фоне
• Видео на фоне
• Сплошной цвет на фоне

Внимание! В этот раз не надо убирать от экранов детей и беременных женщин, ведь это какая-та дискриминация по возрастному и половому признакам!

Вот как это будет

Еще одно объявление! Я часто буду ссылаться на первый урок, дабы не повторяться, так что настоятельно рекомендую ознакомиться с

Зачем?

Давайте фантазировать: Попадает вам проект, где к примеру, на главной странице есть слайдер у которого несколько типов слайдов, у одного на фоне видео, у другого картинка, а у третьего например сплошной цвет. Не будете же вы создавать один набор полей (одну конфигурацию) и запихать (пардон за лексикон) в него все эти поля и рассказывать менеджеру как нужно с этим жить и быть. Это не серьезный подход! ? (Надеюсь кто нибудь поймёт)

За дело

Мы поняли с вами «зачем», теперь давайте узнаем «как». Если вы уже ознакомились с первым уроком, то нам нужно перейти на страницу компонента MIGX и создать 3 конфигурации. Предварительно установите ColorPicker от Jako (но это не принципиально) :

Всё, что не указано мной, пропускайте!

Конфигурация solid (Сплошной цвет)

• Вкладка Settings
  • Name - solid
  • Add new Category - Slider
• Вкладка Formtabs
  • Fields Fields создаем 3 поля
    1. Цвет фона:
       • Fieldname - bgcolor
       • Caption - Выберите цвет фона
       • Input TV type - ColorPicker (или тот который вы
         используете)
    2. Заголовок:
       • Fieldname - header
       • Caption - Заголовок слайда
    3. Описание:
       • Fieldname - description
       • Caption - Описание слайда
       • Input TV type - textarea
  • Multiple Formtabs Field - type (Данное значение будет названием ключа в
    массиве вывода. По умолчанию: MIGX_formname)
  • - Со сплошным цветом на фоне (Текст
    данной конфигурации в списке выбора)
  • - solid (Значение того самого поля type
    в массиве)

Конфигурация video

• Вкладка Settings
  • Name - video
  • Category - Slider
• Вкладка Formtabs
  • Fields - Создаем 1 вкладку и в поле Fields опять же создаем 3 поля, только уже одно из этих полей другого типа.

    Мне стоит тут уточнить, что количество полей и их типов в разных конфигурациях может быть разной настолько, насколько ограничена ваша фантазия… А я знаю, что у вас с фантазиями всё в порядке?

    1. Видео (т.е. файл):
       • Fieldname - video
       • Caption - Загрузите видео
       • Input TV type - file
    2. Заголовок:
       • Fieldname - header
       • Caption - Заголовок слайда
    3. Описание:
       • Fieldname - description
       • Caption - Описание слайда
       • Input TV type - textarea
  • Multiple Formtabs Field - type
  • Multiple Formtabs Optionstext - С видео на фоне
  • Multiple Formtabs Optionsvalue - video

Конфигурация slider

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

• Вкладка Settings
  • Name - slider
  • Category - Slider
  • Замена «Добавить элемент» - Добавить слайд
  • Form Caption
  • Window Title - Добавить/редактировать слайд
• Вкладка Formtabs
  • Fields - Создаем 1 вкладку и в поле Fields опять же создаем 3 поля
    1. Изображение:
       • Fieldname - image
       • Caption - Загрузите изображение
       • Input TV type - image
       • Указываете нужный вам источник файлов, я описал данную задачу в первом уроке
    2. Заголовок:
       • Fieldname - header
       • Caption - Заголовок слайда
    3. Описание:
       • Fieldname - description
       • Caption - Описание слайда
       • Input TV type - textarea
  • Multiple Formtabs - Вот тут и та самая магия, нам нужно выбрать созданные в предыдущих шагах конфигурации и в том числе тот который мы сейчас создаем, т.е. выбираем video, solid и slider

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

    
    

    Еще одно уточнение: сортированы будут конфигурации именно по тому порядку, по которому вы выбрали, т.е. по умолчанию при добавлении нового слайда будет выбрана та которая будет первой в списке
    

  • Multiple Formtabs Label - Выберите тип слайда (Тут указывается текст
    который пользователь будет видеть рядом со списком выбора типа слайда)
  • Multiple Formtabs Field - type
  • Multiple Formtabs Optionstext - С изображением на фоне
  • Multiple Formtabs Optionsvalue - image
• Вкладка Columns
  • Поле Columns. Добавляем два элемента
    1. Заголовок
       • Вкладка Column
         • Header - Заголовок
         • Field - header
       • Вкладка Cell Editor
         • Editor - this.textEditor
    2. Описание
       • Вкладка Column
         • Header - Описание
         • Field - description
       • Вкладка Cell Editor
         • Editor - this.textEditor

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

Идём и быстро создаем TV с типом ввода migx , в поле Конфигурации пишем название нашей конфигурации, т.е. slider , назначаем нужные шаблоны и открываем на редактирование ресурс, ну или же его создаем. Если мы всё сделали верно, то мы должны увидеть следующую картину:

Изображение кликабельно и если же вы уже смотрели гифку по ссылке в начале заметки, то эта она самая

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

Как вывести?

Ввод данных это хорошо, ну а как быть с выводом? - не волнуйтесь товарищи, всё будет. Для вывода у нас опять же 2 хороших варианта и оба эти варианта мы рассматривали в , это родной MIGX-у сниппет getImageList и всемогущий fenom . Давайте глянем как выглядят наши данные:

getImageList

Вызовем сниппет без указания параметра tpl, для того чтобы увидеть сырые данные:

[] Array ( => 14 => image => files/avatar.png => Это слайд с изображением => Ну короче описание) [_alt] => 0 [_first] => 1 [_last] => => 1 => slider) Array ( => 15 => video => files/Моё домашнее позорно.MOV => А это уже видео => Да, действительно! [_alt] => 1 [_first] => [_last] => => 2 => slider) Array ( => 16 => solid => ff0000 => А тут красный-прекрасный цвет => Мне нравится! [_alt] => 0 [_first] => [_last] => 1 => 3 => slider)

fenom

{$_modx->resource.slider| fromJSON | print} Array ( => Array ( => 14 => image => files/avatar.png => Это слайд с изображением => Ну короче описание)) => Array ( => 15 => video => files/Моё домашнее позорно.MOV => А это уже видео => Да, действительно!) => Array ( => 16 => solid => ff0000 => А тут красный-прекрасный цвет => Мне нравится!))
Как мы видим, в наших массивах, кроме всего прочего, затесался ключ type с теми значениями, которые мы с вами указывали при создании конфигураций.

Для того чтобы вывести наш слайдер с помощью getImageList , нам нужно создать 3 чанка с названиями наших значений ключа type , т.е.: image , video и solid . Далее поймете почему.

Примеры чанков:

// Чанк image

// Чанк video // Чанк solid
А вызов должен выглядеть так:

Мы тут берем значения из массивов каждого слайда, потому и мы создавали три чанка названия которых совпадают со значениями полей Multiple Formtabs Field

Ну а на fenom всё выглядит намного проще:

{var $slider = $_modx->resource.slider| fromJSON} {if $slider}

{/if}

Итог и обещанная история

Как мы видим, MIGX справляется с данной задачей если и не сказать «превосходно», но как минимум «хорошо». Еще раз повторю, что вас MIGX не ограничивает в количествах конфигураций, вкладок в каждой конфигурации и в количестве полей в них. А примеры, как вы уже надеюсь поняли, довольно простые для того чтобы вам также было просто ознакомиться с данным функционалом. И еще кое-что важное: в чанках при выводе настоятельно рекомендую проверять на заполненность полей и всегда учитывать, что данные могут быть или не заполнены или по каким-то причинам могут не прийти и потому используйте phx фильтры для синтаксиса MODX или условия в fenom.

Всем спасибо за внимание, пожелал бы всем удачи, но не буду, ведь как говорят: «Удачи желают неудачникам», потому желаю вам счастья и здоровья что-ли, ну а кому интересно, далее история.

Как-то к нам в гости приехали мои родственники, среди них мой племянник (сын сестры) из соседней страны и два моих племянника (Мы почти все ровесники). Загородный дом, солнечная Средняя Азия, небольшая гора и река рядом. Той же ночью мы вчетвером решили прогуляться вдоль этой самой реки и по началу всё было спокойно, причин для волнения не было. Проводили время достаточно весело, рассказывали истории (подчас страшные и жуткие), шутили, ну и всё в таком духе. Но в один момент, я заметил, что один из моих племянников побледнел и это не просто словесный оборот или приукрашивание, ведь такого страха и недоумения на лице человека я никогда не видел до и после данного случая. Он не отрывая глаз смотрел в том направлении, куда я был повернут спиной, т.е. он смотрел будто на что-то или на кого-то позади меня, но не прям позади и близко, мне казалось, что он смотрит куда-то вдаль. Было жутко и я спросил у него: - Что случилось? А он…

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

UPD:
Если чё я Баха!?

Если вдруг кому-то захочется поблагодарить рублём, то так уж и быть: Карта Сбербанка +79609354545

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

Создание MIGX конфигурации

Идем в управление MIGX и добавляем новый элемент с именем slider , в поле замены пишем «Добавить слайды » и переходим на вкладку «Formtabs ».

• Fieldname – zagolovok, Caption – Заголовок.
• Fieldname – slide, Caption – Слайд, Input TV Type – image.
• Fieldname – opisanie, Caption – Описание.
• Fieldname — idstranici, Caption – Укажите id документа на который ссылаться.

• Header – Заголовок, Field – zagolovok.
• Header – Слайд, Field – slide, Renderer – this.renderImage.
• Header – Описание, Field – opisanie.
• Header – id документа, Field – idstranici.

Примечание: По сути мы переносим элементы с Formtabs. Да так же можете заполнять поля Column width – ширину столбцов.

Сохраняем (выполнить).

Для тех кто вообще не хочет париться, создаем пустую конфигурацию и экспортируем в нее следующий код:

{ "formtabs":[ { "MIGX_id":1, "caption":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b", "print_before_tabs":"0", "fields":[ { "MIGX_id":1, "field":"zagolovok", "caption":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a", "description":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0430", "description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":1 }, { "MIGX_id":2, "field":"slide", "caption":"\u0421\u043b\u0430\u0439\u0434", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"image", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":2 }, { "MIGX_id":3, "field":"opisanie", "caption":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":3 }, { "MIGX_id":4, "field":"idstranici", "caption":"\u0423\u043a\u0430\u0436\u0438\u0442\u0435 id \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":4 } ], "pos":1 } ], "contextmenus":"", "actionbuttons":"", "columnbuttons":"", "filters":"", "extended":{ "migx_add":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b", "disable_add_item":"", "add_items_directly":"", "formcaption":"", "update_win_title":"", "win_id":"", "maxRecords":"", "addNewItemAt":"bottom", "media_source_id":"", "multiple_formtabs":"", "multiple_formtabs_label":"", "multiple_formtabs_field":"", "multiple_formtabs_optionstext":"", "multiple_formtabs_optionsvalue":"", "actionbuttonsperrow":4, "winbuttonslist":"", "extrahandlers":"", "filtersperrow":4, "packageName":"", "classname":"", "task":"", "getlistsort":"", "getlistsortdir":"", "sortconfig":"", "gridpagesize":"", "use_custom_prefix":"0", "prefix":"", "grid":"", "gridload_mode":1, "check_resid":1, "check_resid_TV":"", "join_alias":"", "has_jointable":"yes", "getlistwhere":"", "joins":"", "hooksnippets":"", "cmpmaincaption":"", "cmptabcaption":"", "cmptabdescription":"", "cmptabcontroller":"", "winbuttons":"", "onsubmitsuccess":"", "submitparams":"" }, "columns":[ { "MIGX_id":1, "header":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a", "dataIndex":"zagolovok", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" }, { "MIGX_id":2, "header":"\u0421\u043b\u0430\u0439\u0434", "dataIndex":"slide", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"this.renderImage", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" }, { "MIGX_id":3, "header":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "dataIndex":"opisanie", "width":200, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" }, { "MIGX_id":4, "header":"id \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430", "dataIndex":"idstranici", "width":50, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" } ], "category":"" }

Создание TV с конфигурацией MIGX

В дереве MODX на вкладке «Элементы », нажмите + напротив пункта «Дополнительные поля » и вводим следующее:

• «Имя» — slider; «Подпись» — Слайдер.
• Во вкладке «Параметры ввода» в «Тип ввода» выбираем migx, а в поле «Конфигурации» вводим slider .
• Во вкладке «Доступно для шаблонов» выбираем те шаблоны, для которых будет доступен ввод в это поле.

Ввод данных

Откроем документ, для которого присвоено поле slider с MIGX с конфигурацией и введём в него какие-нибудь данные.

Вывод bootstrap 3 carusel на страницу

Html разметка у нас стандартная getbootstrap.com/docs/3.3/javascript/#carousel-examples, переделаем ее под MIGX и в необходимое место в шаблоне пропишем следующий код:

И создаем чанки:

tplsliderIndicator :

и чанк tplsliderItem со следующим содержимым:

Вывод bootstrap 4 carusel на страницу

Как и в предыдущем случае, берем стандартную разметку getbootstrap.com/docs/4.1/components/carousel/ и переделываем ее, в итоге получаем

Где чанк tplsliderIndicator имеет следующий код:

и чанк tplsliderItem со следующим кодом:

Сегодня небольшая статья о том как в MODX создать слайдер при помощи пакета BanerY. Данный пакет можете загрузить и установить с репозитория .

Создание слайдера при помощи BanerY

И так есть статичный слайдер, пусть это будет обычный bootstrap слайдер, с вот такой разметкой:

Цель создать управляемый слайдер из этой разметки. Приступим.

Начнем пожалуй с создания слайдов в BannerY, для этого заходим в Приложения — BannerY — Позиции и создаем позицию (к примеру home-slider).

После этого переходим во вкладку Баннеры и нажимаем на кнопку Новый банер. Откроется окно создания нового банера.

Заполняем все:

• Название, его можно будет вывести при помощи [[+name]].
• Выбираем изображение — [[+image]].
• Указываем URL куда переходить — [[+url]].
• Заполняем описание — [[+description]] — сюда к стати можно зарядить не только текст, но и обычный html, и это круто.
• Ну и выбираем позицию (создали ее ранее).

И так создаем нужное количество слайдов.

Теперь нужно вышеприведенную разметку разбить на чанки и подогнать код в чанках под синтаксис BanerY

Создаем чанк для отдельного слайдера с классом active , пусть будет slide и внедряем в него синтаксис:

Теперь копируем тот чанк и задаем ему имя slide2 и удаляем класс active

Ну и остается по сути только вывести слайды.

[]

В итоге получаем следующее:

Все) Вот так просто создать слайдер на modx при помощи BanerY.

Да к стати его документация находится вот здесь: docs.modx.pro/components/bannery/snippet

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

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

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

Slick – плагин современного слайдера — карусели

Slick – свободно распространяемый jquery – плагин, разработчики которого утверждают, что их решение удовлетворит все ваши требования к слайдеру. Адаптивный слайдер – карусель может работать в режиме «плитки » для мобильных устройств, и, в режиме «перетаскивания » для десктопной версии.

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

Демо-режим | Скачать

Owl Carousel 2.0 – jQuery — плагин с возможностью использования на сенсорных устройствах

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

Слайдер имеет в своем составе некоторые встроенные плагины для улучшения общего функционала. Анимация, проигрывание видео, автозапуск слайдера, ленивая загрузка, автоматическая корректировка высоты – основные возможности Owl Carousel 2.0 .

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

Примеры | Скачать

jQuery плагин Silver Track

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

Примеры | Скачать

AnoSlide – Ультра компактный адаптивный jQuery слайдер

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

Примеры | Скачать

Owl Carousel – Jquery слайдер — карусель

Owl carousel – слайдер с поддержкой сенсорных экранов и технологии drag and drop , легко встраиваемый в HTML — код. Плагин является одним из лучших слайдеров, которые позволяют создавать красивые карусели без какой — либо специально подготовленной разметки.

Примеры | Скачать

3D галерея — карусель

Использует 3D – переходы, основанные на CSS – стилях и немного Javascript кода.

Примеры | Скачать

3D карусель с использованием TweenMax.js и jQuery

Великолепная 3D карусель. Похоже, что это еще бета – версия, потому как я обнаружил пару проблем с ней буквально сейчас. Если вы заинтересованы в тестировании и создании ваших собственных слайдеров – эта карусель будет большим подспорьем.

Примеры | Скачать

Карусель с использованием bootstrap

Адаптивный слайдер – карусель с использованием технологии bootstrap как раз для вашего нового веб-сайта.

Примеры | Скачать

Основанный на Bootstrap – фреймворке слайдер — карусель Moving Box

Наиболее востребованный на портфолио и бизнес сайтах. Подобный тип слайдера — карусели часто встречается на сайтах любого типа.

Примеры | Скачать

Tiny Circleslider

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

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

Примеры | Скачать

Слайдер контента Thumbelina

Мощный, адаптивный, слайдер карусельного типа отлично подойдет к современному сайту. Корректно работает на любых устройствах. Имеет горизонтальный и вертикальный режимы. Его размер минимизирован всего до 1 КБ. Ультра компактный плагин ко всему прочему имеет отличные плавные переходы.

Примеры | Скачать

Wow – слайдер — карусель

Содержит более 50 эффектов, что может помочь вам в создании оригинального слайдера для вашего сайта.

Примеры | Скачать

Адаптивный jQuery слайдер контента bxSlider

Измените размер окна браузера, чтобы увидеть, как адаптируется слайдер. Bxslider поставляется более чем с 50 вариантами настроек и демонстрирует свои функции с различными эффектами переходов.

Примеры | Скачать

jCarousel

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

Примеры | Скачать

Scrollbox — jQuery плагин

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

Примеры | Скачать

dbpasCarousel

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

Примеры | Скачать

Flexisel: адаптивный JQuery плагин слайдера — карусели

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

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

Примеры | Скачать

Elastislide – адаптивный слайдер — карусель

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

Пример | Скачать

FlexSlider 2

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

Пример | Скачать

Amazing Carousel

Amazing Carousel – адаптивный слайдер изображений на jQuery . Поддерживает множество систем управления сайтами, такие как WordPress , Drupal и Joomla . Также поддерживает Android и IOS и настольные варианты операционных систем без каких-либо проблем с совместимостью. Встроенные шаблоны amazing carousel позволяют использовать слайдер в вертикальном, горизонтальном и круговом режимах.

Примеры | Скачать

Slider Revolution - один из самых популярных слайдеров, благодаря огромному спектру функций и простоте использования
от компании ThemePunch . Этот слайдер купили 273,441 + раз, и его используют 2500000+ сайтов во всем мире.

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

• Мощный визуальный редактор - настраивайте показ слайдеров под нужды вашего проекта через удобное меню, в котором
  каждая функция находится на своем месте. Строгая градация не позволит вам запутаться. Единственной трудностью в
  первое время станет желание попробовать их все.
• Контроль вариативности каждого слайда - планируемое отображение блоков на экране ПК, планшета и телефона
  показывается в визуальном редакторе. Вы можете изменять размер слайдов индивидуально для каждого устройства.
  Адаптивный шаблон не позволит картинкам и видео исказиться или занять большее пространство, чем требуется для
  удобного просмотра.
• Работа с социальными сетями и видео хостингами - Slider Revolution пятого поколения позволяет включать в слайдер
  данные Instagramm, Facebook, Flickr, Twitter, Vimeo и Youtube. Если размещение видео планируется на собственном
  сервере, вы можете воспользоваться языком HTML5. Части кода пропишутся автоматически.
• Высокая производительность и оптимизация слайдов - плагин работает быстро в режиме редактирования и уменьшает
  вес слайдера без потерь качества содержимого. Опасаться за долгую загрузку страниц вам не придется. Что особенно
  актуально по отношению к мобильным устройствам, находящимся вне доступа WiFi соединений.
• Огромное количество спецэффектов при переходе слайдов
• Множество эффектов анимации при выводе текста, видео и картинок
• Запуск видео автоматически при открытии сайта или вручную, на выбор, остановка слайдера при просмотре видео,
  перемотка и т.д.
• Большой выбор настроек навигации
• Вставка анонсов записей с ссылками прямо в слайдер, при этом он настроен на seo оптимизацию
• Поддержка и установка шрифтов Google Fonts
• Использование множество слоев (картинок, видео, надписей и ссылок) в одном слайде, их можно бесчисленно
  накладывать друг на друга, при этом создается реалистичное видео или любая презентация.

Внимание! Для того, что бы иметь возможность загружать Online премиум шаблоны слайдеров и обьекты библиотеки, необходимо купить отдельно лицензию от ThemePunch, котрая на момент написание данного текста стоит 19$, после чего активировать ее, введя код покупки в поле указанном на рисунке ниже.

Видео-обзор modSliderRevolution