Knockout在页面上生成两个bootstrap轮播，第二个轮播被打破

Question

我使用淘汰赛在页面上显示两个旋转木马。我的第一个旋转木马工作正常，但第二个旋转木马只显示侧面导航并在点击时断开。

这是代码：

<div data-bind="foreach: Languages">
    <div data-bind="attr: { id: 'image-carousel-' + Id() }" class="carousel slide" data-ride="carousel" data-interval="false">
        <!-- Indicators -->
        <ol class="carousel-indicators" data-bind="foreach: $root.mediaFiles">
            <li data-bind="attr: { 'data-target': '#image-carousel-' + $parent.Id(), 'data-slide-to': $index() }, css: { active: Name == $parent.Image() }"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner media-images" data-bind="foreach: $root.mediaFiles">
            <div class="item" data-bind="css: { active: Name == $parent.Image() }">
                <div class="text-center dark-carbon top-padding-sm bottom-padding-sm">
                    <img class="cursor-pointer pol-h-200" data-bind="attr: { src: Url }, click: function () { $root.selectImage(Name, $parent); }" alt="Media file" />
                </div>
                <div class="carousel-caption">
                    <span data-bind="visible: Name == $parent.Image()">selected</span>
                    <span data-bind="visible: Name != $parent.Image()">click to select image</span>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" data-bind="attr: { href: '#image-carousel-' + Id() }" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" data-bind="attr: { href: '#image-carousel-' + Id() }" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

任何想法都表示赞赏。