Как контролировать количество строк HTML в зависимости от количества элементов MIGX?

Question

[RKey_Prog]

Добрый вечер. Есть слайдер, который зависит от количества фотографий. И необходимо вставить его в MODX. В самом MODX настроил Migx на добавление фото. Теперь надо настроить изменение количества input с типом radio в зависимости от количества слайдов в migx. Как сделать такую зависимость? Каждый input должен получать класс slider-1, slider-2 и т.д. в зависимости от количества input. Код слайдера и скрин migx представлены ниже.

<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">
								    [[getImageList? &tvname=`slider` &tpl=`tplsliderItem`]]
								</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>

написать какой-то js код может, который бы принимал количество слайдов и уже в зависимости от этого изменял html. Как вот передать в js количество слайдов.

Comments

[Ankhena]

Не надо делать слайдеры на css-костылях, тем более с изменяющимся количеством слайдов. Это безумие.
Возьмите swiper.js и все будет хорошо.

Answer 1

[Дмитрий]

Самый простой способ - вызвать getImageList дважды - один раз для вывода input'ов, второй - для вывода слайдов.
У вас получится что-то вроде:

<div class="slider">
              <div data-am-fadeshow="next-prev-navigation">
                <!-- Radio -->
                [[getImageList? &tvname=`slider` &tpl=`tpl.slider.input.row`]]
                
                <!-- Slides -->
                <div class="fs-slides">
                    [[getImageList? &tvname=`slider` &tpl=`tplsliderItem`]]
                </div>

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

Чанк tpl.slider.input.row будет в себе содержать примерно следующее:

<input type="radio" name="css-fadeshow" id="slide-[[+idx]]" />

[[+idx]] - это плейсхолдер, выводящий порядковый номер записи. Можно заменить на [[+MIGX_id]] - плейсхолдер, который будет выводить ID текущей записи MIGX. Но этот плейсхолдер не зависит от сортировки MIGX-записей в самой табличке.
Всё то же самое ещё проще сделать на Fenom, там даже не нужен сниппет getImageList.

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