Карусель Bootstrap с базой данных ничего не появляется

Question

У меня проблема: я хочу сделать карусель Bootstrap, но ничего не появляется.Я беру список из контроллера

HTML :

@using VoyageVDD.Models;
@{
    List<IndexSlider> IndexSliders = ViewData["IndexSliders"] as List<IndexSlider>;
}

Далее я делаю карусель css:

<div id="bootstrap-touch-slider" class="carousel bs-slider fade  control-round indicators-line cursor" data-ride="carousel" data-pause="hover" data-interval="5000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        @foreach (var item in IndexSliders)
        {
            <li data-target="#bootstrap-touch-slider" data-slide-to="@Html.DisplayFor(modelItem => item.DataSlide)" class="@Html.DisplayFor(modelItem => item.Class)"></li>
        }
    </ol>
    <div class="carousel-inner heightcarousel" role="listbox">
        <!-- Third Slide -->
        @foreach (var item in IndexSliders)
        {
            <div class="item @Html.DisplayFor(modelItem => item.Class)">
                <img src="@Html.DisplayFor(modelItem => item.ImgSrc)" alt="Slider Index" />
            </div>
        }
    </div><!-- End of Wrapper For Slides -->
</div> <!-- End  bootstrap-touch-slider Slider -->

Я думаю, что естьпроблема с классом Activ.

А вот мой контроллер:

public ActionResult Index()
{
    List<IndexSlider> IndexSlider = db.IndexSlider.ToList();
    ViewData["IndexSliders"] = IndexSlider;

    return View();
}

Моя база данных:

ID / Class ( Active or NULL ) / ImgSrc ( url ) / DataSlide ( 0 1 2 3 )

Ничего не появляется;Вот код в источнике:

<div id="bootstrap-touch-slider" class="carousel bs-slider fade  control-round indicators-line cursor" data-ride="carousel" data-pause="hover" data-interval="5000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
            <li data-target="#bootstrap-touch-slider" data-slide-to="0" class="Active"></li>
            <li data-target="#bootstrap-touch-slider" data-slide-to="1" class=""></li>
            <li data-target="#bootstrap-touch-slider" data-slide-to="2" class=""></li>
            <li data-target="#bootstrap-touch-slider" data-slide-to="3" class=""></li>
    </ol>
    <div class="carousel-inner heightcarousel" role="listbox">
        <!-- Third Slide -->
            <div class="item Active">
                <img src="/Content/images/Slider/slider_1.jpg" alt="Slider Index" />
            </div>
            <div class="item ">
                <img src="/Content/images/Slider/slider_2.jpg" alt="Slider Index" />
            </div>
            <div class="item ">
                <img src="/Content/images/Slider/slider_3.jpg" alt="Slider Index" />
            </div>
            <div class="item ">
                <img src="/Content/images/Slider/slider_4.jpg" alt="Slider Index" />
            </div>
    </div><!-- End of Wrapper For Slides -->
</div> <!-- End  bootstrap-touch-slider Slider -->