如何使用WCM菜单/导航组件创建如下所示的嵌套HTML结构？

Question

I am designing a carousel with three images. I need to implment following code using WCM. I am able to design with a single result design. Please guide me how to get three links in a set. All the images are in the same site area.

<div class="subBox">
    <div class="set">
        <div class="images"><img src='slide1.jpg' alt='' /></div>
        <div class="images"><img src='slide2.jpg' alt='' /></div>
        <div class="images"><img src='slide3.jpg' alt='' /></div>
    </div>
    <div class="set">
        <div class="images"><img src='slide4.jpg' alt='' /></div>
        <div class="images"><img src='slide5.jpg' alt='' /></div>
        <div class="images"><img src='slide6.jpg' alt='' /></div>
    </div>
    <div class="set">
        <div class="images"><img src='slide7.jpg' alt='' /></div>
        <div class="images"><img src='slide8.jpg' alt='' /></div>
        <div class="images"><img src='slide9.jpg' alt='' /></div>
    </div>
</div>

Answer 1

Use a List Presentation in a Menu / Navigator - depending on whether you need to preserve the order. Set the maximum number of 9.

Header:

<div class="subBox">
  <div class="set">

Item Layout:

[Plugin:Matches pattern="(3|6)" text="[Placeholder tag='listnum']"]
  </div>
  <div class="set">
[/Plugin:Matches]
    <div class="images">[Element type="content" context="autofill" key="img"]</div>

Footer:

  </div>
</div>

Answer 2

So you have one sitearea under this sitearea there is a set of content .

There is nothing out of the box can do it for you.

First Solution(Using Javascript)

• render all Images in one hidden Div
• add some java script code to construct your HTML

Second solution(Creating Custom Plugin)

• Create custom plugin and pass to it index of the item and sublist items number and it only renders it's body if ("index" mod "Sublist items number" equal zero), you can get index from [Placeholder tag="listnum" htmlencode="false"] and in your case "Sublist items number" is 3

• In menu design header ="<div class="subBox"><div class="set">" in design for each result render your item then use your custom plugin to render " " -> will render every 3 items design for footer "</div></div>"