MODX Revo | MIGX | BS 5 > Слайдер

В общем ничего удивительно, слайдер на BootStrap 5, с бекендом в MODX Revo и использованием MIGX. Код для копипасат.

Конечно немного хитровыебанный местами код, но зато быстро и многофункционально(:

Задача

Слайдер, который выводится на главной, с возможностями

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

Установки

1. Подключаем BootStrap 5
2. Устанавливаем MIGX

Настройка MIGX и доп полей

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

• Название доп свойства bs_slider_show
• Тип вввода Флажки (checkbox)
• Возможные значения Да==1

Доп свойство для добавления картинок

• Название доп свойства bs_img
• Тип вввода Изображение

Доп свойство MIGX для добавления самих слайдов

• Название доп свойства bs_slider
• Тип вввода migx
• Вкладки формы:

  [
    {
      "caption":"Инфо","fields": 
      [
        {"field":"bss_title",
          "caption":"Заголовок"
        },
        {
          "field":"bss_description",
          "caption":"Содержание"
        },
        {
          "field":"bss_href",
          "caption":"Ссылка"
        },
        {
          "field":"bss_active",
          "inputTVtype":"checkbox", 
          "inputOptionValues":"Да==1",
          "caption":"Активность"
        }
      ]
    },
    {
        "caption":"Медиа",
        "fields":[
            {
                "field":"bss_img",
                "caption":"Изображение",
                "inputTV":"bs_img",
                "sourceFrom":"MIGX"
            }
        ]
    }
  ]

• Разметка колонок:

  [
    {"header": "Заголовок", "width": "100", "sortable": "true", "dataIndex": "bss_title"},
    {"header": "Содержание", "width": "300", "sortable": "true", "dataIndex": "bss_description"},
    {"header": "Изображение", "width": "300", "sortable": "true", "dataIndex": "bss_img","renderer": "this.renderImage"},
    {"header": "Активность", "width": "300", "sortable": "true", "dataIndex": "bss_active", "show_in_grid":1, "renderer":"this.renderCrossTick"}
  ]

Настройка чанков

bs_slider

Основной чанк со слайдером

[[*bs_slider_show:is=`1`:then=`
>div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  >div class="carousel-indicators">
    [[getImageList?
      &tvname=`bs_slider`
      &tpl=`bs_slider_dots`
    ]]
  >/div>
  >div class="carousel-inner">
    [[getImageList?
      &tvname=`bs_slider`
      &tpl=`bs_slider_img`
    ]]
  >/div>
  [[getImageList?
    &tvname=`bs_slider`
    &tpl=`bs_slider_buttons`
  ]]
>/div>
`]]

bs_slider_img

Чанк с элементами слайда

[[+bss_active:ne=``:then=`
  <div class="carousel-item _bss_item [[+idx:is=`1`:then=`active`]]">
    [[+bss_href:ne=``:then=`
      <a href="[[+bss_href]]">
        <div class="_bss_img" style="background: url([[+bss_img]]) no-repeat center center; background-size: cover;"></div>
      </a>
    `:else=`
      <div class="_bss_img" style="background: url([[+bss_img]]) no-repeat center center; background-size: cover;"></div>
    `]]
    
    <div class="carousel-caption d-none d-md-block">
      [[+bss_title:ne=``:then=`
        <h5>[[+bss_title]]</h5>
      `]]
      [[+bss_description:ne=``:then=`
        <p>[[+bss_description]]</p>
      `]]
    </div>
  </div>
`]]

bs_slider_dots

Точки навигации слайда

[[+bss_active:is=`1`:then=`
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="[[+idx:bs_slider_idx]]" [[+idx:bs_slider_idx:is=`0`:then=`class="active"`]]></button>
`]]

Настройка Сниппетов

Хитрый фикс, дело в том что в BS слайдере отчёт для навигации по слайдам идёт с 0, а из MIGX можно вытащить индексы только с 1, спустя несколько попыток я пришёл к выводу снижать на 1 позицию через сниппет, не лучшая идея..

<?php
echo $input-1;

BootStrap 5 настройки

JavaScript

Для запуска и работы слайдера понадобитсья запихнуть в JS код

$('#carouselExampleIndicators').carousel({
  interval: false
})

Который приказыват запустить слайдер, но не листать его автоматически, можно указать вместо false число в секундах для автоматического листания

Вывод слайдера

Теперь для вывода слайдера в нужном месте в шаблоне нужно ввести код

[[$bs_slider]]

И в настройка главной странице поставить галочку, выводить слайдер, и добавить демо слайды.

Ггготттово