MODx MIGX создание слайдера или создание галереи

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

Я использую способ быстрого создания MIGX через TV поле. Создадим TV поле banners

Далее переходим во вкладку "Параметры ввода"

Здесь мы должны выбрать тип ввода "MIGX", а такде прописать JSON код для 

1. Создания полей самого баннера

2. Отображения preview в админке

Вот код для первого пункта

[{"caption":"Image", "fields": [ 
  {"field":"banner_title","caption":"Название баннера"} ,   
  {"field":"banner_img","caption":"Картинка","inputTV": "migx_img"},
  {"field":"banner_img_mobile","caption":"Картинка мобильник","inputTV": "migx_img"},
  {"field":"banner_link","caption":"Ссылка"},
  {"field":"published", "caption":"Опубликован", "inputTVtype":"checkbox", "inputOptionValues":"Да==1"}
  ]
}]

Вот код для второго пункта

[
{
  "header": "Идентификатор", "width": "30", "sortable": "true", "dataIndex": "MIGX_id"
},
{
  "header": "Название баннера", "width": "360", "sortable": "true", "dataIndex": "banner_title"
},
{
  "header": "Картинка", "width": "260", "sortable": "true", "dataIndex": "banner_img","renderer": "this.renderImage"
},

{
  "header": "Активность", "width": "260", "sortable": "true", "dataIndex": "published"
}

]

В данном случае есть нюанс и касается он загрузки изображения на сервер. " "inputTV": "migx_img" "  эта запись указывает, что данное поле должно отображаться как TV поле migx_img, которое мы создали заранее. Оно имеет тип "Смешанная загрузка файла" это дополнение mixedImage

Вы можете указать вместо этого просто " "inputTVtype": "image" " тогда загрузка будет происходить с сервера

После чего нам нужно указать у какого шаблона будет отображаться данное TV поле, я укажу "Главная страница"

После чего сохраняем и переходим на страницу "Главная страница" в раздел дополнительные поля TV

Для примера тут уже заполнено 4 баннера, давайте попробуем отредактировать какой-то

А теперь давайте встроим вывод баннеров на главной странице сайта. Я использую owl carousel

<div class="banner">
        <div class="container">
            <div class="banner_slider nonloop">

               
               [ [getImageList? 
                    &tvname=`banners` 
                   
                    &tpl=`@CODE: 
                       <div class="banner_slider_item"><a href="[[+banner_link]]">
                       
                            <picture>
                             <source srcset="[[+banner_img_mobile]]" media="(max-width: 780px)">
                             <img src="[[+banner_img]]" alt="">
                            </picture>
                       </a></div>
                   
                    
                    `
                    
                 
                  &where=` { "published":"1" } `
                ] ] 
                
            </div>
        </div>
    </div>

а также выведим js код

/*Слайдер  1*/
        $(document).ready(function() {
            $('.banner_slider').owlCarousel ( {
                loop: true, //Зацикливаем слайдер
                //Отступ от элемента справа в 50px
                autoplay: true, //Автозапуск слайдера
                smartSpeed: 500, //Время движения слайда
                autoplayTimeout: 4000, //Время смены слайда
                dots: true,
                autoplayHoverPause: true,
                items: 1

            } );
        } );