Ка сделать полноценную карусель на modx?

Question

[Kalwin UA]

Интересует 2 вопроса, как сделать полноценный слайдер:
Как добавить ползунки на слайдер будстрап?
Имею такую структуру:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    [[pdoMenu?
        &parents=`72`
        &level=`1`
        &tplOuter=`tpl.upSliderOuter`
        &tpl=`tpl.upSlider`
        &includeTVs=`bl-image`
        &firstClass=`active`
    ]]
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

И хотелось бы ещё добавить ползунки пролистывания

<ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  </ol>

Как добавить полноценный класс active без костыля &firstClass=active? Так как при добавлении в classs="[[+classnames]]", я получаю значения: first и last. но не active.

Answer 1

[Danny Arty]

Установите дополнение Bootstrap из репозитория.
Далее шаблон такой:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        [[+indicators]]
    </ol>

    <!-- Wrapper for slides -->
    <div id="carouselExampleControls" class="carousel slide carousel-inner" data-ride="carousel">
        [[pdoMenu?
        &parents=`72`
        &level=`1`
        &tplOuter=`tpl.upSliderOuter`
        &tpl=`tpl.upSlider`
        &includeTVs=`bl-image`
        &firstClass=`active`
    ]]
    </div>
    [[!GenerateIndicators?
        &input=`[[+slider.total]]`
        &toPlaceholder=`indicators`
    ]]

    <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</div>

Документация тут