Полное изображение с ползунком

Question

Я хочу иметь полный слайдер изображений. Я смотрю в Chrome и изображения найдены, и в скрипте нет ошибок. Но изображения не отображаются. это черный экран.

У меня есть это:

@section Styles {
    <link href="@Url.Content("~/Content/FullImageSlider.css")" rel="stylesheet" type="text/css" />


}

@section scripts{

    <script>
        $('.carousel').carousel({
            interval: 5000 //changes the speed
        })
    </script>
}

<div class="container fill">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <div class="fill" style="background-image:url('../../Images/VeryLarge.JPG');">
                    <div class="container">

                    </div>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('../../Images/road.JPG');">
                    <div class="container">

                    </div>
                </div>
            </div>

        </div>
        <div class="pull-center">
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
        </div>
    </div>
</div>

а это мой css

html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
.fill{width:100%;height:100%;background-position:center;background-size:cover;}

/* faster sliding speed */
.carousel-inner > .item {
    -webkit-transition: 0.3s ease-in-out left;
    -moz-transition: 0.3s ease-in-out left;
    -o-transition: 0.3s ease-in-out left;
    transition: 0.3s ease-in-out left;
}

/* keep full widget on smaller screens */
@media (max-width: 767px) { 
    body {
        padding-left: 0;
        padding-right: 0;
    }
}

Спасибо