How to control the number of HTML lines depending on the number of MIGX elements?

Question

css

Good evening. There is a slider that depends on the number of photos. And you need to insert it into MODX. In MODX itself, I configured Migx to add photos. Now you need to set up a change in the number of inputs with the radio type, depending on the number of slides in migx. How to make such a dependency? Each input must receive the class slider-1, slider-2, and so on. depending on the number of input. The slider code and migx screen are presented below.

<div class="slider">
              <div data-am-fadeshow="next-prev-navigation">
                <!-- Radio -->
                <input type="radio" name="css-fadeshow" id="slide-1" />
                <input type="radio" name="css-fadeshow" id="slide-2" />
                <input type="radio" name="css-fadeshow" id="slide-3" />
                
                <!-- Slides -->
                <div class="fs-slides">
                    
                </div>

                  <!-- Quick Navigation -->
                <div class="fs-quick-nav">
                  <label class="fs-quick-btn" for="slide-1"></label>
                  <label class="fs-quick-btn" for="slide-2"></label>
                  <label class="fs-quick-btn" for="slide-3"></label>
                </div>
                  
                  <!-- Prev Navigation -->
                <div class="fs-prev-nav">
                  <label class="fs-prev-btn" for="slide-1"></label>
                  <label class="fs-prev-btn" for="slide-2"></label>
                  <label class="fs-prev-btn" for="slide-3"></label>
                </div>
                  
                  <!-- Next Navigation -->
                <div class="fs-next-nav">
                  <label class="fs-next-btn" for="slide-1"></label>
                  <label class="fs-next-btn" for="slide-2"></label>
                  <label class="fs-next-btn" for="slide-3"></label>
                </div>
              </div>
            </div>

write some js code that would take the number of slides and change the html depending on this. How to pass the number of slides to js.

Answer 1

The easiest way is to call getImageList twice - once to display the inputs, once to display the slides.
You will end up with something like:

<div class="slider">
              <div data-am-fadeshow="next-prev-navigation">
                <!-- Radio -->
                
                
                <!-- Slides -->
                <div class="fs-slides">
                    
                </div>

                  .... и далее по тексту

The tpl.slider.input.row chunk will contain something like this:

<input type="radio" name="css-fadeshow" id="slide-" />

is a placeholder that displays the index number of the entry. Can be replaced with - a placeholder that will display the ID of the current MIGX entry. But this placeholder does not depend on the sorting of MIGX records in the table itself.
It's even easier to do the same on Fenom, you don't even need the getImageList snippet.

{set $slider = $_modx->resource.slider | json_decode : true}
{set $idx = 1}
<!-- Radio -->
{foreach $slider as $slide}
<input type="radio" name="css-fadeshow" id="slide-{++$idx}" />
{/foreach}
<div class="fs-slides">
{foreach $slider as $slide}
...код слайда
{/foreach}
</div>