0

我正在使用 Boostrap 2.x 滑块在我从数据库中检索的网页上显示一系列推荐。

我的代码如下：

<div id="testimonials" class="carousel slide">

    <div class="carousel-inner">
        @foreach (var item in Model.Testimonials)
        {
            <div class="item" style="max-height:70px; overflow:hidden">
                <h4>@item.Title</h4>
                @item.Quote
            </div>
        }

    </div>
</div>

要使滑块起作用，需要将第一项设置为“活动”，否则显示的第一项为空白。如何将“活动”类添加到 MVC 中的第一项？

所以第一项应该显示为

<div class="item active" style="max-height:70px; overflow:hidden">

代替 

<div class="item" style="max-height:70px; overflow:hidden">

在我的脚本文件中，我有：

$(document).ready(function () {
$('#testimonials').carousel({
    interval: 6000
});

$('#testimonials').carousel('cycle');
}

（此页面上有 2 个滑块）

谢谢。

4

1 回答 1

11

您可以检查循环中的第一项：

<div id="testimonials" class="carousel slide">
    <div class="carousel-inner">
        @{
             var i = 0;
             foreach (var item in Model.Testimonials)
             {
                 var itemClass = i++ == 0 ? "item active" : "item";
                 <div class="@itemClass" style="max-height:70px; overflow:hidden">
                     <h4>@item.Title</h4>
                     @item.Quote
                 </div>
             }
         }
    </div>
</div>

或者如果您的属性是一种类型或任何集合，则替换foreach为for循环，这些项目可以通过索引单独访问：Model.TestimonialsIList<T>

<div id="testimonials" class="carousel slide">
    <div class="carousel-inner">
        @for (int i = 0; i < Model.Testimonials.Count; i++)
        {
            var item = Model.Testimonials[i];
            var itemClass = i == 0 ? "item active" : "item";
            <div class="@itemClass" style="max-height:70px; overflow:hidden">
                <h4>@item.Title</h4>
                @item.Quote
            </div>
        }
    </div>
</div>

如果你想用 JavaScript 做到这一点，那么：

$(document).ready(function () {
    $('.carousel-inner .item:first').addClass('active');

    $('#testimonials').carousel({
        interval: 6000
    });

    $('#testimonials').carousel('cycle');
}

另外，我建议您将该style="max-height:70px; overflow:hidden"行移至 css 类：

.carousel-inner .item {
    max-height: 70px;
    overflow: "hidden";
}
于 2013-08-19T09:51:46.643 回答