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

    @{

        var first = true;

    }

    @foreach (var item in ViewBag.Images)

    {

        <div class="carousel-item @(first?Html.Raw("active"):Html.Raw(""))">

            <img class="d-block w-100" src="@item.Image" alt="@item.Name">

        </div>

        first = false;

    }

</div>

<a class="carousel-control-prev" href="#carouselExampleControls" role="button"

                                 data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next" href="#carouselExampleControls" role="button"

                                 data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

</a>

</div>

Answer 2

请尝试这个。我希望你的问题得到解决

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

        <ul class="carousel-indicators">  

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

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

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

        </ul>           

        <div class="carousel-inner" role="listbox">  

            @{int i = 0;}  

            @foreach (var item in Model)  

            {  

                i++;  

                var active = i == 1 ? "active" : "";  

                <div class="carousel-item @active">  

                    <img src="@Url.Content(@item.FilePath)" alt="">  

                </div>  

            }  

        </div>  

        <a class="carousel-control-prev" href="#demo" data-slide="prev">  

            <span class="carousel-control-prev-icon"></span>  

        </a>  

        <a class="carousel-control-next" href="#demo" data-slide="next">  

            <span class="carousel-control-next-icon"></span>  

        </a>  

    </div>