如何将标签集成到Bootstrap Carousel中？

Question

现在，我有一个概念证明，其中包含一个带有标签轮播的模态。它看起来像这样：

轮播的图像由CMS填充。我想做的是将多个图像标记为上面的标签之一。当图像显示在幻灯片中时，其相应的选项卡将成为活动选项卡。最好是能够单击选项卡，幻灯片显示会跳转到组中的第一个。

这是我当前代码的样子：

<ul class="nav nav-tabs" role="tablist">
    <li class="active">
        <a href="#">Brand</a>
    </li>
    <li>
        <a href="#">Print</a>
    </li>
    <li>
        <a href="#">Web</a>
    </li>
    <li>
        <a href="#">Marketing</a>
    </li>
</ul>
<div id="this-carousel-id" class="carousel slide">
    <!-- class of slide for animation -->
    <div class="carousel-inner">
        {foreach from=$images item=slide name=foo} {if $smarty.foreach.foo.first}
        <div class="item active">
            <!-- class of active since it's the first item -->
            <img src="{$slide->file}" alt="">
            <div class="carousel-caption">
                <p>
                    Caption text here
                </p>
            </div>
        </div>{else}
        <div class="item">
            <!-- class of active since it's the first item -->
            <img src="{$slide->file}" alt="">
            <div class="carousel-caption"></div>
            <ul>
                <li style="list-style: none">{foreach from=$slide-&gt;fields item=imagefield}
                </li>
                <li>fieldname '{$imagefield.name}' has value: '{$imagefield.value}'
                </li>
                <li style="list-style: none">{/foreach}
                </li>
            </ul>
        </div>{/if} {/foreach}
    </div><!-- /.carousel-inner -->
    <!--  Next and Previous controls below
        href values must reference the id for this carousel -->
    <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a> <a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- /.carousel -->

关于如何解决这个问题的任何建议？