Как создать вложенную структуру HTML, показанную ниже, с помощью компонента WCM Menu/Nav?

Я проектирую карусель с тремя изображениями. Мне нужно внедрить следующий код с помощью WCM. Я могу проектировать с одним результатом дизайна. Пожалуйста, объясните мне, как получить три ссылки в наборе. Все изображения находятся в одной области сайта.

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

2 ответа

Используйте представление списка в меню / навигаторе - в зависимости от того, нужно ли сохранить порядок. Установите максимальное количество 9.

Заголовок:

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

Макет элемента:

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

Таким образом, у вас есть одна область сайта, под которой есть набор контента.

Там нет ничего из коробки может сделать это для вас.

Первое решение (с использованием Javascript)

  • визуализировать все изображения в одном скрытом Div
  • добавьте код java-скрипта для создания своего HTML

Второе решение (Создание собственного плагина)

  • Создайте пользовательский плагин и передайте ему индекс номера элемента и элемента подсписка, и он отображает его тело только в том случае, если ("index" mod "Номер элемента подсписка" равен нулю), вы можете получить индекс из [Placeholder tag="listnum" htmlencode="ложь"], а в вашем случае "Количество элементов списка" равно 3

  • В дизайне меню header ="<div class="subBox"><div class="set">" в дизайне для каждого результата визуализируйте ваш элемент, затем используйте ваш собственный плагин для рендеринга " " -> будет отображать каждые 3 элемента дизайна для нижнего колонтитула "</div></div>"

Другие вопросы по тегам