How to make convenient content generation through MIGX?

Question

MODX

As before:
There is a slider on the page. When a slide changes, the content of the other block is updated.
(here is mostly pseudocode, so as not to confuse anyone with a slider and other things)

<div class="slider">
    <!-- вообще, тут идёт генерация слайдов -->
    <div class="slide active" id="1">
        <img src="img/1.png">
    </div>
    <div class="slide" id="2">
        <img src="img/2.png">
    </div>
</div>
<div id="block"></div>

json was loaded via ajax, but in fact the data variable was like this:

var slider = sliderInit(".slider"); // инициализируем слайдер
slider.onChangeSlide(changeBlock); // привязываем функцию
var data = {
    "slides":{
        "1":['elem1', 'elem2'], // здесь хранятся id-шники элементов, которые надо подгружать
        "2":['elem2', 'elem3']
    }
    "elements":{
        "elem1":{"imgPath":"img/elems/1.png"},
        "elem2":{"imgPath":"img/elems/2.png"},
        "elem3":{"imgPath":"img/elems/3.png"}
    }
}
function changeBlock(){
    selectedSlideId = $(".slide.active").attr('id');
    var generatedHtml = '';
    $.each(data.slides[selectedSlideId], function(){ // перебираем id-шники элементов для активного слайда
        generatedHtml += "<img src=' " + data.elems[this].imgPath + " '>";
    });
    block.html(generatedHtml);
}

It turned out that on the first slide, the block contained images img/elems/1.png and img/elems/2.png, and on the second slide img/elems/2.png and img/elems/

3.png use the same elements.
There is an additional nuisance in that the admin in MODX should have the ability to add these element pictures (in general, there are other options besides the pictures), and the ability to add these elements to the lists for slides.
I myself am only trying to figure it out in MODX and do not fully understand how the same MIGX works in general. I already understood how to generate slides with it, but I can’t figure out how to implement such a structure.

Answer 1

The slider can be made using BannerY.