旋转木马中未显示的箭头和指示器(来自数据库的图像)

时间:2015-11-28 15:36:11

标签: twitter-bootstrap razor twitter-bootstrap-3 carousel

我正在使用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>

0 个答案:

没有答案