如何在Bootstrap Carousel中仅展示指定类型图片？

问题描述 #

我希望在Bootstrap Carousel中展示特定类型的图片。我有一个名为Skills的Model，其中包含一个type字段，用户可选择“Certification”或“Others”选项。目前轮播组件可正常运行，但会同时展示“Certification”和“Others”类型的图片，我仅需在轮播中展示“Certification”类型的图片。需要说明的是，两类图片都要在同一页面展示，但“Others”类型无需放入轮播中。

我原本考虑为“Certification”单独创建一个Model，但想了解是否有替代方案。感谢您的帮助，下方是当前的实现代码：

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

解决方案 #

完全不需要单独创建新Model，只需要在遍历Skills数据时添加过滤条件，只筛选出type为Certification的项即可。具体修改如下：

1. 修改轮播指示器的循环逻辑 #

在遍历前先过滤数据，仅保留Certification类型的项：

<div class="carousel-indicators">
    @foreach (var img in Model.Skill
        .Where(s => s.type == "Certification")
        .Select((image, index) => new { Image = image, Index = index }))
    {
        <button hidden type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="@img.Index"
                class="@(img.Index==0?"active":"")" aria-current="@(img.Index==0?"true":"false")" aria-label="Slide @(img.Index+1)"></button>
    }
</div>

2. 修改轮播内容的循环逻辑 #

同样在遍历前添加过滤条件：

<div class="carousel-inner">
    @foreach (var img in Model.Skill
        .Where(s => s.type == "Certification")
        .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">
                <img src="@img.Image.ImageUrl" class="d-block w-100" alt="@img.Image.Name">
            </div>
        </div>
    }
</div>

3. 页面其他区域展示Others类型图片 #

在页面需要展示Others的位置，单独过滤并遍历即可：

<h3>其他技能</h3>
<div class="row">
    @foreach (var skill in Model.Skill.Where(s => s.type == "Others"))
    {
        <div class="col-md-4 mb-3">
            <img src="@skill.ImageUrl" class="img-fluid" alt="@skill.Name">
        </div>
    }
</div>

可选优化建议 #

• 可以把"Certification"和"Others"定义为Model中的常量（比如public const string TypeCertification = "Certification";），避免硬编码字符串出错；
• 给图片的alt属性设置实际内容，提升页面可访问性。

内容的提问来源于stack exchange，提问作者Thom Y