在引导程序轮播中显示特定图像

Question

就像标题所说，我想显示特定类型的图像。我有一个名为 Skills 的模型，其中有一个类型对象，用户可以在“认证”和“其他”之间进行选择。现在，轮播正在工作，但它同时显示“认证”和“其他”，但我只希望它显示“认证”图像。需要注意的一件事是，我在同一页面中同时拥有“认证”和“其他”图像，但对于“其他”，我不需要将其放在轮播中。

我想我可能必须专门为“认证”创建另一个模型，但我想知道是否有其他选择。感谢任何帮助，谢谢

 <div id="carouselExampleIndicators" class="carousel  slide" data-bs-ride="carousel">
     <div class="carousel-indicators">
         <!--Index will automatically give a numeric value-->
         @foreach (var img in Model.Skill.Select
         ((image, index) => new { Image = image, Index = index }))
         {
             <!--The class="(imageWithIndex.Index == 0 ? "active" : "")" lets 0 active-->
             <button hidden type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="@img.Index"
                     class="@(img.Index==0?"active":"")" aria-current="true" aria-label="Slide 1"></button>
         }

     </div>
     <div class="carousel-inner">
         @foreach (var img in Model.Skill.Select
         ((image, index) => new { Image = image, Index = index }))
         {
             <div class="@(img.Index==0?"carousel-item active":"carousel-item")">
                 <div class="p-1 m-2 text-center">
                     <!--Display the image-->
                     <img src="@img.Image.ImageUrl" class="d-block w-100" alt="...">
                 </div>
             </div>
       
         }
     </div>
     <!--The previous and next button-->
     <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Previous</span>
     </button>
     <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Next</span>
     </button>
 </div>

Answer 1

你可以尝试下面的代码吗：

<div id="carouselExampleIndicators" class="carousel  slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        @foreach (var img in Model.Skill.Select((image, index) => new { Image = image, Index = index }))
        {
            if (img.Image.SkillType == "Certification") 
            {
                <button hidden type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="@img.Index"
                        class="@(img.Index==0?"active":"")" aria-current="true" aria-label="Slide 1"></button>
            }
        }
    </div>
    <div class="carousel-inner">
        @foreach (var img in Model.Skill.Select((image, index) => new { Image = image, Index = index }))
        {
            if (img.Image.SkillType == "Certification") 
            {
                <div class="@(img.Index==0?"carousel-item active":"carousel-item")">
                    <div class="p-1 m-2 text-center">
                        <img src="@img.Image.ImageUrl" class="d-block w-100" alt="...">
                    </div>
                </div>
            }
        }
    </div>
    <!-- The previous and next buttons remain the same -->
    ...
</div>