MVC C# 轮播图像

Question

我一直在尝试在我的 MVC 应用程序上创建轮播图像。以下来自 W3 的代码片段仅用作示例。结果是图像在网页上显示在一个下面。我需要在 MVC 应用程序上执行其他操作来解决此问题吗？

<div class="container">

    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <ol class="carousel-indicators">

            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

            <li data-target="#myCarousel" data-slide-to="1"></li>

            <li data-target="#myCarousel" data-slide-to="2"></li>

        </ol>

        <!-- Wrapper for slides -->

        <div class="carousel-inner">

            <div class="item active">

                <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Los Angeles" style="width:100%;">

            </div>

            <div class="item">

                <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">

            </div>

            <div class="item">

                <img src="https://www.w3schools.com/bootstrap/newyork.jpg" alt="New york" style="width:100%;">

            </div>

        </div>

        <!-- Left and right controls -->

        <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>

Answer 1

我前段时间有同样的要求，我使用了下面的代码，看看它是否适合你。<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"><div class="carousel-inner">&nbsp; &nbsp; @{&nbsp; &nbsp; &nbsp; &nbsp; var first = true;&nbsp; &nbsp; }&nbsp; &nbsp; @foreach (var item in ViewBag.Images)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-item @(first?Html.Raw("active"):Html.Raw(""))">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img class="d-block w-100" src="@item.Image" alt="@item.Name">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; first = false;&nbsp; &nbsp; }</div><a class="carousel-control-prev" href="#carouselExampleControls" role="button"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data-slide="prev">&nbsp; &nbsp; <span class="carousel-control-prev-icon" aria-hidden="true"></span>&nbsp; &nbsp; <span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carouselExampleControls" role="button"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data-slide="next">&nbsp; &nbsp; <span class="carousel-control-next-icon" aria-hidden="true"></span>&nbsp; &nbsp; <span class="sr-only">Next</span></a></div>

Answer 2

请尝试这个。我希望你的问题得到解决<div id="demo" class="carousel slide" data-ride="carousel">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <ul class="carousel-indicators">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li data-target="#demo" data-slide-to="0" class="active"></li>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li data-target="#demo" data-slide-to="1"></li>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li data-target="#demo" data-slide-to="2"></li>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-inner" role="listbox">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @{int i = 0;}&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @foreach (var item in Model)&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i++;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var active = i == 1 ? "active" : "";&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-item @active">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="@Url.Content(@item.FilePath)" alt="">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <a class="carousel-control-prev" href="#demo" data-slide="prev">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="carousel-control-prev-icon"></span>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <a class="carousel-control-next" href="#demo" data-slide="next">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="carousel-control-next-icon"></span>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp;&nbsp;