MODX (Evo) Ditto 和 Carousel 具有多个 DIV，其中需要加载子资源 ID

Question

这涉及 MODX Evolution、Ditto 和 Bootstrap3 Carousel。

我的目标是在轮播中以单个 DIV 的形式显示 Ditto 加载的文章。我的代码只显示一篇 DIV 中的所有三篇文章，并且所有 DIV 都显示相同的 (!) 三篇文章（前三篇）。我的猜测是问题出在我的 HTML 块上，但如果我更改代码，那么我将失去对轮播的响应能力。我哪里错了？

这是一个同时显示三个独特 DIV 的轮播。总共 12 x DIV 显示在 4 轮中 (= 4 x 3)。
每个 DIV 必须显示一篇唯一加载的文章，即一个资源 ID。因此，每轮一次显示三篇独特的文章（总共 4 轮）。
我的轮播没有 JS 或 JQuery。都是响应式Bootstrap3制作的
模板的 id=2。文章资源类别有 id=9，它的子资源有 id=20 直到 id=31（= 总共 12 篇文章）。

模板（= id=2）同上调用：

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

HTML CHUNK articles（原始 HTML 代码 --> 4 项 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>

Answer 1

您想做的是：

<div class="carousel-inner">

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

</div>

&tpl 块：

<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 "active" 或者可能有一个属性让同上使用不同的块，因为它是第一个tpl。

可能是这样的：

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

这是一个猜测 - 您必须检查同上文档以了解实际语法和可用性。

Answer 2

我通过在 carousel_articles 块中为每个 div 双 div （不同的 parents 每个都匹配我的文章类别）和使用随机化参数。

MODX (Evo) Ditto 和 Carousel 具有多个 DIV，其中需要加载子资源 ID

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

html

modx

modx-templates

ditto