Как я могу использовать Bootstrap Carousel в качестве списка для записей БД?

я немного искал, и мне действительно нужно знать, как использовать класс начальной загрузки 4 Carousel Как список некоторых данных модели?

я пытался управлять самостоятельно, и я сделал что-то вроде этого в представлении:

@model IEnumerable<ElMatrodySite.Models.NewsData>
<link href = "~/Content/Home.css" rel = "stylesheet" />
@{
    ViewBag.Title = "Home Page";
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 100%;
  }
</style>
<div class = "container">
    <div style = "width:100%;height:150px;padding-top:0px; direction:rtl;">
        <div class = "row">
            <div class = "col-xl-4">
                <img src = "~/photos/Logo.png" class = "mx-auto d-block" style = "height:250px;"/>
            </div>
            <div class = "col-xl-8" style = "text-shadow:0px 4px 10px #808080; color:#352c5e;">
                <br />
                @if (Request.IsAuthenticated)
                {
                    ElMatrodySite.Models.ApplicationUser Apps = new ElMatrodySite.Models.ApplicationUser();
                    <h2 class = "mx-auto d-block text-center" id = "ccword">مرحبًا بك @Apps.Firstname في موقع أسرة المطرودي !</h2>
                }
                else
                {
                    <h2 class = "mx-auto d-block text-center" id = "ccword">مرحبًا بكم في الموقع الرسمي الجديد لأسرة المطرودي !</h2>
                }
            </div>
        </div>
    </div>
</div>
<div class = "row" style = "direction:rtl;">
    <div class = "container">
        <div class = "col-xl-6" style = "padding-top:150px;" id = "xcard">
            <div id = "myCarousel" class = "carousel slide" data-ride = "carousel">

                <ol class = "carousel-indicators">
                    @{
                        int i = 0;
                    }
                    @foreach (var item in Model)
                    {
                        <li data-target = "#myCarousel" data-slide-to = "@i" class = "@(i == 0 ? "active" : "")"></li>
                        i++;
                    }
                </ol>

                <div class = "carousel-inner">
                    @{
                        i = 0;
                    }
                    @foreach (var item in Model)
                    {
                        <div class = "item @(i == 0 ? "active" : "")">
                            <img src = "~/NewsPhotos/@item.file" class = "image img-responsive">
                            <div class = "carousel-caption">
                                <h3>@item.ArticleTitle</h3>
                            </div>
                        </div>
                        i++;
                    }
                </div>
                <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>
    </div>
</div>

это неправильно, потому что каждому элементу в списке нужен идентификатор в data-slide-to а также один из них должен быть active, но при работе с foreach можно получить список данных.

это код в контроллере:

[HttpGet]
        public ActionResult Index()
        {
            List<NewsData> slideList = new List<NewsData>();
            using (MatrodyEntities db = new MatrodyEntities())
            {
                var type = new NewsData();
                slideList = db.NewsData.Where(xx => xx.ArticleID == type.ArticleID).Take(5).ToList();
                return View(from NewsData in db.NewsData.ToList() select NewsData);
            }
        }

Поскольку я беру последние 5 элементов, добавленных в базу данных.

поэтому мне нужен небольшой учебник, чтобы составить список Carousel с помощью asp.net mvc, не разрушая весь дизайн.