具有多個DIV的MODX（Evo）Ditto和Carousel，其中需要加載子資源ID

Question

這涉及到MODX Evolution，Ditto和Bootstrap3 Carousel。

我的目的是在輪播中展示在單個DIV中加載了Ditto的文章。 我的代碼僅顯示一個DIV中的所有三篇文章，並且所有DIV都顯示相同的（！）三篇文章（前三篇）。 我的猜測是問題出在我的HTML塊中，但是如果我更改代碼，則會失去對輪播的響應能力。 我哪里錯了？

• 它是一個輪播，具有三個同時顯示的獨特DIV。 總共12 x DIV，將在4個回合中顯示（= 4 x 3）。
• 每個DIV必須顯示一個唯一的已加載文章，即一個資源ID。 因此，每輪一次顯示三篇獨特的文章（總共四輪）。
• 我的輪播沒有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個DIV）：

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

讓ditto生成項目div。

您將不得不編寫腳本來找出哪個塊將是第一個，並將其標記為“活動”類，或者可能有一個屬性使ditto可以在第一個tpl中使用其他塊。

也許像這樣：

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

這是一個猜測-您將必須檢查ditto文檔中的實際語法和可用性。

Answer 2

我通過在每個單獨的div的carousel_articles塊內放置一個Ditto調用（每個父項都與我的文章類別匹配）來解決這個問題，並使用randomize參數。