Комментарии ()

    +
    T
    >

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

    03.07.2021 16:43
    06.07.2021 23:40
    333

    /* Превью

    Код для копипаста

    */

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

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

    Задача

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

    Установки

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

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

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

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

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

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

    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]]

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

    Ггготттово