多Bootstrap轮播组件独立滚动功能实现求助

问题 #

页面中存在多组Bootstrap轮播组件，点击「上一项/下一项」按钮时，所有轮播会同步滚动，无法单独控制某一组的切换，拆分到局部视图后问题依旧。

核心原因 #

1. 重复ID：所有轮播共用同一个id="carouselExample"，选择器无法区分不同轮播实例。
2. 全局选择器：JS中使用$('.carousel-inner')、$('.carousel-control-next')这类全局选择器，操作时会选中页面所有匹配元素，而非当前操作的轮播内元素。
3. 共享状态：scrollPosition是全局变量，所有轮播共用同一个滚动位置，导致同步滚动。

解决方案 #

1. 修改HTML：为每个轮播分配唯一ID #

渲染多组轮播时，为每个轮播生成唯一ID（结合循环索引或Model中的唯一标识），同时更新按钮的data-bs-target属性：

<!-- 示例：循环渲染多组轮播，用item.Id作为唯一标识 -->
@foreach (var item in Model.CarouselGroups)
{
    <div id="carouselExample-@item.Id" class="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="card">
                    @{
                        var firstCourse = item.Courses.First();
                    }
                    <img src="@firstCourse.Image" class="card-img-top" alt="课程封面">
                    <div class="card-body">
                        <h5 class="card-title">@firstCourse.Title</h5>
                        <h6 class="card-subtitle mb-2 text-muted">课程副标题</h6>
                        <p class="card-text">@firstCourse.Description</p>
                        <a href="#" class="card-link">查看详情</a>
                        <a href="#" class="card-link">加入学习</a>
                    </div>
                </div>
            </div>
            @foreach (var course in item.Courses.Skip(1))
            {
                <div class="carousel-item">
                    <div class="card">
                        <img src="@course.Image" class="card-img-top" alt="课程封面">
                        <div class="card-body">
                            <h5 class="card-title">@course.Title</h5>
                            <h6 class="card-subtitle mb-2 text-muted">课程副标题</h6>
                            <p class="card-text">@course.Description</p>
                            <a href="#" class="card-link">查看详情</a>
                            <a href="#" class="card-link">加入学习</a>
                        </div>
                    </div>
                </div>
            }
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample-@item.Id" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">上一项</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExample-@item.Id" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">下一项</span>
        </button>
    </div>
}

2. 修改JS：针对单个轮播独立操作 #

遍历每个轮播组件，为每个轮播维护独立的滚动状态，仅操作当前点击按钮所属的轮播内元素：

$(document).ready(function () {
    // 遍历页面中所有轮播组件
    $('.carousel').each(function() {
        const $currentCarousel = $(this);
        const carouselElement = $currentCarousel[0];
        
        if (window.matchMedia('(min-width: 576px)').matches) {
            // 初始化当前轮播实例
            const carousel = new bootstrap.Carousel(carouselElement, {
                interval: false
            });

            // 仅获取当前轮播内的元素
            const $inner = $currentCarousel.find('.carousel-inner');
            const $item = $currentCarousel.find('.carousel-item');
            
            // 每个轮播独立维护滚动位置
            let scrollPosition = 0;
            const carouselWidth = $inner[0].scrollWidth;
            const cardWidth = $item.width();

            // 绑定下一页按钮事件
            $currentCarousel.find('.carousel-control-next').click(function () {
                if (scrollPosition < carouselWidth - (cardWidth * 4)) {
                    scrollPosition += cardWidth;
                    $inner.animate(
                        { scrollLeft: scrollPosition },
                        600
                    );
                }
            });

            // 绑定上一页按钮事件
            $currentCarousel.find('.carousel-control-prev').click(function () {
                if (scrollPosition > 0) {
                    scrollPosition -= cardWidth;
                    $inner.animate(
                        { scrollLeft: scrollPosition },
                        600
                    );
                }
            });
        } else {
            $currentCarousel.addClass('slide');
        }
    });
});

关键说明 #

• 每个轮播通过唯一ID区分，确保选择器精准定位。
• 所有元素操作都基于当前轮播容器的find()方法，避免全局影响。
• 每个轮播的scrollPosition变量在遍历闭包内，实现状态完全独立。

内容的提问来源于stack exchange，提问作者Pedro Azevedo