Bootstrap带缩略图的Carousel使用foreach后缩略图切换异常

核心问题：索引不匹配 #

Bootstrap轮播的切换依赖基于0的序列索引，但你的代码里用了数据库的GalleryId（非连续ID值）作为切换标识，导致点击缩略图时无法定位到正确的轮播项。

具体错误点及修复： #

1. 主轮播项的class与标识错误 #

原代码中carousel-item重复添加了冗余的item类，且data-slide-number绑定了非连续的GalleryId，需要改为循环的索引值：

<!-- 错误写法 -->
<div class="carousel-item @(obj.index==0?"item active":"item")" data-slide-number="@obj.item.GalleryId">

<!-- 修复后 -->
<div class="carousel-item @(obj.index==0?"active":"")" data-slide-number="@obj.index">

Bootstrap 4+轮播项仅需carousel-item类，active直接附加即可；data-slide-number改为循环的index，与轮播项的位置一一对应。

2. 缩略图的索引绑定错误 #

data-slide-to需要对应主轮播项的0基索引，而非GalleryId，同时要把缩略图的循环改为带索引的遍历：

<!-- 错误写法 -->
@foreach (var item in galleries)
{
    <div id="carousel-selector-@item.GalleryId" class="thumb col-4 col-sm-2 px-1 py-2" data-target="#myCarousel" data-slide-to="@item.GalleryId">
        <img src="/ProductFile/Gallery/@item.ImageName" class="img-fluid" alt="...">
    </div>
}

<!-- 修复后 -->
@foreach (var obj in galleries.Select((item, index) => new { item, index }))
{
    <div id="carousel-selector-@obj.index" class="thumb col-4 col-sm-2 px-1 py-2" data-target="#myCarousel" data-slide-to="@obj.index">
        <img src="/ProductFile/Gallery/@obj.item.ImageName" class="img-fluid" alt="...">
    </div>
}

通过带index的循环，确保每个缩略图对应主轮播的正确位置。

3. JS点击事件逻辑修正 #

原JS从ID中截取GalleryId作为切换参数，现在改为直接读取data-slide-to的索引值：

// 错误写法
$('[id^=carousel-selector-]').click(function () {
    var id_selector = $(this).attr('id');
    var id = parseInt(id_selector.substr(id_selector.lastIndexOf('-') + 1));
    $('#myCarousel').carousel(id);
});

// 修复后
$('[id^=carousel-selector-]').click(function () {
    var slideIndex = $(this).data('slide-to');
    $('#myCarousel').carousel(slideIndex);
});

4. 主轮播滑动同步缩略图的逻辑修正 #

原代码读取的是GalleryId，现在改为读取修正后的data-slide-number索引值：

// 错误写法
$('#myCarousel').on('slide.bs.carousel', function (e) {
    var id = parseInt($(e.relatedTarget).attr('data-slide-number'));
    $('[id^=carousel-selector-]').removeClass('selected');
    $('[id=carousel-selector-' + id + ']').addClass('selected');
});

// 修复后
$('#myCarousel').on('slide.bs.carousel', function (e) {
    var slideIndex = parseInt($(e.relatedTarget).attr('data-slide-number'));
    $('[id^=carousel-selector-]').removeClass('selected');
    $('#carousel-selector-' + slideIndex).addClass('selected');
});

内容的提问来源于stack exchange，提问作者majid mohammadi