Bootstrap slider in ASP.NET MVC from SQL Server database

Question

I tried to make Bootstrap carousel slider for news from SQL Server database

I want the slider to look like this: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

But the role said

The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.

but I did not know how to use .active class to one of my news because it is foreach loop.

All of my news has been under each other also, the left and right controls not working

Here is a screenshot of news slider result now

The code now:

HomeController.cs

public ActionResult Index()
{
     return View(db.News.ToList());
}

Index.cshtml

@model IEnumerable<Project.Models.News>
    @{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Scripts.Render("~/bundles/bootstrap")

<!--Start slide code-->
<div class="container imgs">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        @foreach (var item in Model)
        {
            <div class="carousel-inner">
                <div class="item active"> //My mistake is here, how to make first news of class active?
                    <div class="item ">
                        @{ string imageBase64 = Convert.ToBase64String(item.newImg);
                            string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);
                            <img src="@imageSrc" />
                        }
                        <div class="carousel-caption">
                            <h3>@item.newName</h3>
                            <a href="@Url.Action("News", "News", new { id = item.newId })" class="btn btn-default" style="background-color:white ;color:black ">Read More</a>
                            @*<button type="button" class="btn btn-default">Read More</button>*@
                        </div>
                    </div>
                </div>
            </div>
        }
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Any help?

Answer 1

To add class="active" to the first element in the list you can either:

@{int v = 0;}
@foreach (var item in Model)
{
    <div class="carousel-inner">
        <div class="item@(v == 0 ? " active" : "")">
            @item.newName
        </div>
    </div>
    v++;
}

Or:

@foreach (var item in Model.Select((value, i) => new { i, value }))
{
    <div class="carousel-inner">
        <div class="item@(item.i == 0 ? " active" : "")">
            @item.value.newName
        </div>
    </div>
}