MVC C# 在一个幻灯片轮播中显示数据库中的两个项目

Question

我能够从数据库中检索数据并将其显示在轮播中，一次显示一个项目，但我的要求是在一张幻灯片中一次显示多个项目（2 个项目）。我已经尝试过但无法实现。以下是我的代码供参考：

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000"
        data-pause="hover" data-wrap="true">
        <!-- 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" role="listbox">
            @{int i = 0; }
            @foreach (var item in Model)
            {
               i++;
               var active = i == 1 ? "active" : "";
               <div class="item @active">
                   <img src="@Url.Content(item.AchievementCategory.Cat_Img)" alt="@item.A_Title" class="img-responsive" />
                   <div class="carousel-caption d-none d-md-block">
                       <h5>@item.A_Title</h5>
                       <p>Some representative placeholder content for the first slide.</p>
                   </div>
               </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>

控制器：

public ActionResult 
{
    var list = db.Achievements.OrderByDescending(x => x.A_Id).ToList();
    return View(list);
}

Answer 1

这是一个丑陋的解决方案并且有冗余代码，但我认为可行。这个想法是让多少个滑块容器等于模型，每个容器都有一个 'current' 元素和下一个。在两个项目的父项上设置了活动 class。

风景

@model List<WebApplication1.Controllers.ModelModel>;
@{
    ViewData["Title"] = "Home Page";
}


<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        @for (var  index=0; index< Model.Count; index++)
        {
            var item1 = Model[index];
                var item2 = Model[index+1<Model.Count?index+1: 0 ];
                var active = index == 0 ? "active" : string.Empty;
           

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

            <div class=" half-item">
                <div>@item1.Title</div>
                <div>@item1.Desc </div>
            </div>
            <div class=" half-item">
                <div>@item2.Title</div>
                <div>@item2.Desc </div>
            </div>
            </div>
        </div>
       
        
        }
    </div>
</div>


<style>
    .wrapper {
        display:flex;
        justify-content:space-between;
    }
    .half-item {
        width:49%;
        border:1px solid black;
    }
</style>

和控制器方法（简单部分）

 public IActionResult Index()
        {
            var model = Enumerable.Range(1, 4).Select(x => new ModelModel() {
            Title = $"Title{x}",
                Desc =$"Description{x}{x}"
            }).ToList();
            return View(model);
        }

Answer 2

好吧，我使用了@benuto 建议的逻辑并添加了一些修改并且它起作用了。如果有人需要，我会发布答案。

<div class="carousel-inner" role="listbox" style="border:2px solid red;">              
                @foreach (var item in Model)
                {
                    for (var index = 0; index < Model.Count; index++)
                    {
                        var item1 = Model[index];
                        //var item2 = Model[index + 1 < Model.Count ? index + 1 : 0];
                        var active = index == 0 ? "active" : string.Empty;

                        <div class="item @active">
                            <div class="row">
                                <div class="col-xs-3">
                                    <img src="@Url.Content(item.AchievementCategory.Cat_Img)" alt="@item.A_Title" class="img-responsive" />
                                </div>                             

                                <div class="col-xs-3">
                                    <img src="@Url.Content(item1.AchievementCategory.Cat_Img)" alt="@item1.A_Title" class="img-responsive" />
                                </div>                                
                            </div>
                        </div>
                    }
                }
            </div>

public ActionResult CAchievements()
        {
            var list = db.Achievements.OrderByDescending(x => x.A_Id).ToList();
            return View(list);
        }

MVC C# 在一个幻灯片轮播中显示数据库中的两个项目

MVC C# show two items from database in one slide carousel

c#

model-view-controller

carousel