如何用Radio Button控制Carousel切换？优先无JavaScript实现

无JavaScript实现方案 #

借助Bootstrap轮播的原生data属性，结合单选按钮的标签关联，无需编写额外JS代码即可实现需求：

1. 给每个单选按钮添加对应<label>，通过for属性绑定单选按钮ID，同时给label添加Bootstrap轮播控制属性：
   • data-bs-target="#carouselExampleIndicators2"：指定要控制的轮播容器
   • data-bs-slide-to="n"：设置要切换到的轮播项索引（第一项为0，第二项为1，依此类推）
2. 保留item1单选按钮的checked属性，确保默认选中第一个轮播项。

修改后的完整代码：

<div class="container-fluid">
    <div class="row align-items-center">
        <div class="col-auto">
            <h3 class="mb-3">Recommended</h3>
        </div>
        <div class="col-12 p-0 mb-3">
            <div id="carouselExampleIndicators2" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row g-6 border border-dark-3">
                            <div class="col-xl-2 col-lg-4 col-md-3  col-xs-1 p-0 ps-2">
                                <div class="card p-2 border-1 rounded-0 h-100">
                                    <img class="card-img-top custom-card-img-top" alt="..." src="">
                                    {{-- Todo: Change to heart icon and button by conditional --}}
                                    <i class="fa-solid fa-heart position-absolute top-0 end-0 m-3 heart-icon"></i>
                                    <div class="card-body p-2">
                                        ...
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- This is second Item  --}}
                    <div class="carousel-item">
                        <div class="row g-6 border border-dark-3">
                            <div class="col-xl-2 col-lg-4 col-md-3  col-xs-1 p-0 ps-2">
                                <div class="card p-2 border-1 rounded-0 h-100">
                                    <img class="card-img-top custom-card-img-top" alt="..." src="">
                                    {{-- Todo: Change to heart icon and button by conditional --}}
                                    <i class="fa-solid fa-heart position-absolute top-0 end-0 m-3 heart-icon"></i>
                                    <div class="card-body p-2">
                                        ...
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- This is second Item  --}}
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 text-center">
        <div class="form-check form-check-inline m-0">
            <input class="form-check-input" type="radio" name="item-recommended" id="item1" checked>
            <label class="form-check-label" for="item1" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="0"></label>
        </div>
        <div class="form-check form-check-inline m-0">
            <input class="form-check-input" type="radio" name="item-recommended" id="item2">
            <label class="form-check-label" for="item2" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="1"></label>
        </div>
        <div class="form-check form-check-inline m-0">
            <input class="form-check-input" type="radio" name="item-recommended" id="item3">
            <label class="form-check-label" for="item3" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="2"></label>
        </div>
    </div>
</div>

注：如果需要给单选按钮添加可见文本，直接在<label>标签内写入内容即可，比如<label ...>Item 1</label>。

JavaScript实现方案（兼容旧环境） #

若原生data属性在旧浏览器中不生效，可通过JS监听单选按钮的切换事件手动控制轮播：

// 获取轮播容器和所有单选按钮
const carousel = document.getElementById('carouselExampleIndicators2');
const radioButtons = document.querySelectorAll('input[name="item-recommended"]');

// 初始化Bootstrap轮播实例（需确保已引入Bootstrap JS）
const carouselInstance = new bootstrap.Carousel(carousel);

// 给每个单选按钮绑定切换事件
radioButtons.forEach((radio, index) => {
    radio.addEventListener('change', () => {
        if (radio.checked) {
            // 切换到对应索引的轮播项
            carouselInstance.to(index);
        }
    });
});

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