Question

我正在尝试建立一个旋转木马。我尽可能地遵循Bootstrap示例，但我没有得到旋转木马。图像水平出现而不是在幻灯片中显示。这段代码有问题吗？

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div id="product-image" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#product-image" data-slide-to="0" class="active"></li>
                <li data-target="#product-image" data-slide-to="1"></li>
            </ol>

            <div class="carousel-inner" role="listbox">
                <div [ngClass]="{active: first}">
                    <img src="..\assets\img\{{product.images.productImage[0]}}">
                    <div class="carousel-caption">
                        <h2>{{product.make}}</h2>
                    </div>
                </div>

                <div [ngClass]="{active: first}">
                    <img src="..\assets\img\{{product.images.productImage[1]}}">
                    <div class="carousel-caption">
                        <h2>{{product.make}}</h2>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#product-image" 
                role="button" data-slide="prev">
                    <span class="icon-prev" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
            </a>

            <a class="right carousel-control" href="#product-image" 
                role="button" data-slide="next">
                    <span class="icon-next" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

Answer 1

我在我的案例中发现了问题。这是引导版本问题。尝试使用不同的版本，其中一个正确显示旋转木马。没有提到版本，因为我使用不同的方法构建轮播，但发布答案因为问题相同 - 幻灯片显示为堆栈，并且在控制台或任何地方都没有错误。

Angular 2 - Bootstrap轮播无法正常工作

1 个答案: