Adding active class to dynamic Twitter Bootstrap carousel in ASP.NET MVC - asp.net-mvc

Question

I'm using the Boostrap 2.x slider to display a series of testimonials on a webpage which I retrieve from a database.
My code is as follows:
<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>
For the slider to work, the first item needs to be set to 'active', otherwise the first item shown is blank. How do I add the 'active' class to the first item in MVC?
So the first item should display as
<div class="item active" style="max-height:70px; overflow:hidden">
instead of
<div class="item" style="max-height:70px; overflow:hidden">
In my script file I have:
$(document).ready(function () {
$('#testimonials').carousel({
interval: 6000
});
$('#testimonials').carousel('cycle');
}
(there are 2 sliders on this page)
Thanks.

Answer 1

You can check for the first item in the loop:
<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>
or replace foreach with for loop if your Model.Testimonials property is a type of IList<T> or any collection, which items can be individually accessed by index:
<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>
If you want to do this with JavaScript, so:
$(document).ready(function () {
$('.carousel-inner .item:first').addClass('active');
$('#testimonials').carousel({
interval: 6000
});
$('#testimonials').carousel('cycle');
}
Also I would suggest you to move the style="max-height:70px; overflow:hidden" line to css class:
.carousel-inner .item {
max-height: 70px;
overflow: "hidden";
}