我正在使用MVC5
中的Carousel引导滑块和Razor
视图引擎,其中包含从数据库调用的图像。如何显示指示符和箭头,以及如何为图像提供全屏宽度?
Index.cshtml:
@model NP1.ViewModels.HomeVM
@{
ViewBag.Title = "Home Page";
}
<!-- start carousel -->
<div>
<div class="carousel slide" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
@foreach (var item in Model.Carousels)
{
if (item == Model.Carousels.FirstOrDefault())
{
<div class="item active ">
<img style="height:250px; width:100%;" class="img-responsive" src="@Url.Content(item.CarouselImage.ToString())">
<div class="carousel-caption">
<h3>@item.CarouselSubject</h3>
<h4>@item.CarouselInfo</h4>
</div>
</div>
}
else
{
<div class="item">
<img style="height: 250px; width: 100%;" class="img-responsive" src="@Url.Content(item.CarouselImage.ToString())" />
<div class="carousel-caption">
<h3>@item.CarouselSubject</h3>
<h4>@item.CarouselInfo</h4>
</div>
</div>
}
}
</div>
</div>
</div>
Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>@Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr")</head>
<body class="container-fluid" style="width:100% !important;padding:0px;">
<div class="container body-content">@RenderBody()
<footer></footer>
</div>@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false)</body>
</html>