PHP轮播图：如何仅为首个div添加active类并修复缩略图选中事件

你的代码存在两个关键问题导致轮播异常：

• 所有carousel-item和指示器都被添加了active类，Bootstrap轮播要求只有第一个轮播项和对应指示器能拥有这个类
• 指示器的data-slide-to属性固定为1，每个指示器需要对应不同的轮播项索引（从0开始），否则点击无法触发正确的切换

修改后的完整代码 #

<div id="carousel-product" class="carousel slide carousel-thumbnails mb-3" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <?php
        $alt_img = '';
        $query = $db->query("SELECT * FROM urun_img WHERE urun_id = '{$urun['id']}'", PDO::FETCH_ASSOC);
        if($query->rowCount())
        {
            $index = 0; // 初始化轮播项索引
            foreach($query as $row)
            {
                // 仅为第一个轮播项添加active类
                $item_active = $index === 0 ? ' active' : '';
                echo '<div class="carousel-item'.$item_active.'"><img class="img-responsive" src="upload/'.$row['img'].'"></div>';
                
                // 仅为第一个指示器添加active类，同时设置正确的data-slide-to索引
                $indicator_active = $index === 0 ? ' active' : '';
                $alt_img.= '<li data-target="#carousel-product" data-slide-to="'.$index.'" class="verso-transition'.$indicator_active.'"><img src="upload/'.$row['img'].'" alt="'.$urun['baslik'].'"></li>';
                
                $index++; // 每次循环后索引自增
            }
        }
        ?>
    </div>
    <ol class="carousel-indicators -mb--2">
        <?php echo $alt_img; ?>
    </ol>
</div>

关键修改说明 #

1. 添加索引计数器：用$index变量跟踪当前轮播项的位置，从0开始计数
2. 控制active类的添加：通过$index === 0的判断，仅给第一个轮播项和指示器添加active类
3. 修正data-slide-to属性：将固定值1替换为动态的$index，确保每个指示器对应正确的轮播项位置

这样修改后，轮播图就能正常初始化（默认显示第一个项），点击缩略图指示器也能触发对应的轮播项切换。

内容的提问来源于stack exchange，提问作者Semih Şahin