How to make a full-fledged carousel on modx?

Question

MODX

Interested in 2 questions, how to make a full-fledged slider:
How to add sliders to the bootstrap slider?
I have this structure:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    
    <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>

And I would also like to add scrolling sliders

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

How to add a full-fledged active class without the crutch &firstClass=active ? Because when I add to classs="", I get the values: first and last. but not active.

Answer 1

Install the Bootstrap plugin from the repository.
Next, the template is:

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

    <!-- Wrapper for slides -->
    <div id="carouselExampleControls" class="carousel slide carousel-inner" data-ride="carousel">
        
    </div>
    

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

Documentation here