[SOLVED] MODX (Evo) Ditto and Carousel with multiple DIVs in which children resource IDs need to be loaded

MODX (Evo) Ditto and Carousel with multiple DIVs in which children resource IDs need to be loaded

This concerns MODX Evolution, Ditto and Bootstrap3 Carousel.

My aim is to show Ditto loaded articles in individual DIVs presented in a carousel. My code only shows all three articles inside one DIV and all DIVs show the same (!) three articles (the first three). My guess is that the problem lies in my HTML chunk, but if I change the code then I loose the responsiveness for the carousel. Where am I wrong?

It is a carousel with three unique DIVs showing at once. Total of 12 x DIVs which get displayed in 4 rounds (= 4 x 3).
Each DIV has to show one unique loaded article, i.e. one resource ID. So, three unique articles show at once each round (of 4 rounds in total).
I have no JS or JQuery for my carousel. It is all responsive Bootstrap3 made.
The template has id=2. The articles resource category has id=9 and its children have id=20 till id=31 (= in total 12 articles).

TEMPLATE (= id=2) DITTO CALL:

[[Ditto? &parents=`9` &display=`12` &orderBy=`createdon DESC` &tpl=`articles`]]

HTML CHUNK articles (original HTML code --> 4 items x 3 DIVs):

<div class="carousel-inner">
            <div class="item active">
                <div class="col-md-4 col-sm-6">
                    [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                    [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                   [+content+]
                </div>
            </div>

            <div class="item">
                <div class="col-md-4 col-sm-6">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                    [+content+]
                </div>
            </div>

            <div class="item">
                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                    [+content+]
                </div>
            </div>

            <div class="item">
                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                   [+content+]
                </div>

                <div class="col-md-4 col-sm-6 hidden-xs">
                  [+content+]
                </div>
            </div>
        </div>

Solution

I solved it by placing a Ditto call within the carousel_articles chunk for each indivdual div (with different parents each matching my articles categories) and use the randomize parameter.