如何将当前Bootstrap卡片视图改造为Bootstrap Carousel轮播组件？

核心修改逻辑 #

将原有平铺卡片结构替换为Bootstrap轮播结构，按每3张卡片为一个轮播项拆分播客列表，适配3列卡片轮播需求。

完整修改后代码 #

<?php 
//var_dump($get_packages_list);
if($get_packages_list){
    foreach($get_packages_list as $get_package){?>
                        
    <div class="row">
        <div class="col-md-12">
            <div class="packages_list_body">
                <div class="packages_cards_inner_wrap" id="package-<?php echo $get_package->post_name;?>">
                    <h2 id="bundle_p_title" style="color:#a52a2a; margin-left: 12px;"><?php echo $get_package->post_title.' - <small>'.$default_plan_title.'</small>';?></h2>
                    <!-- 轮播外层容器 动态ID避免多套餐冲突 -->
                    <div id="carousel-<?php echo $get_package->post_name; ?>" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <?php
                                $podcasts = get_field('podcasts', $get_package->ID);
                                $minimum_price = get_field('minimum_price', $get_package->ID);
                                $podcast_count = count($podcasts);
                                $index = 0;
                                foreach($podcasts as $podcast){
                                    $podcast_details = get_post($podcast);
                                    $image = get_the_post_thumbnail_url(get_the_ID(), array('250', '250')); 
                                    $image = $image?$image:wp_get_attachment_image_src(8059, 'thumbnail');
                                    
                                    // 每3个卡片开启新轮播项
                                    if($index %3 ==0){
                                        $active = $index ==0 ? 'active' : '';
                                        echo '<div class="item '.$active.'"><div class="row packages_cards">';
                                    }
                                ?>
                                                            
                                <div class="col-md-4">
                                    <div class="card <?php echo 'package-'.$get_package->ID.' podcast-'.$podcast_details->ID;?>"  data-price="<?php echo $minimum_price;?>" data-packageid="<?php echo $get_package->ID;?>">
                                    <img src="<?php echo $image[0];?>" alt="<?php echo $podcast_details->post_title; ?>" class="card-img-top">
                                        <div class="card-body">
                                            <h3><?php echo substr($podcast_details->post_title, 0, 20) . ' ...';?></h3>
                                            <p> Hello, This is ia test episode of Abbot and Costello hope you guys have enjoyed listening...</p>
                                            </div>
                                         </div>
                                     </div> 
                                <?php 
                                    $index++;
                                    // 每3个卡片或到列表末尾时闭合当前轮播项
                                    if($index %3 ==0 || $index == $podcast_count){
                                        echo '</div></div>';
                                    }
                                }?>
                        </div>
                        <!-- 轮播左右控制按钮 -->
                        <a class="left carousel-control" href="#carousel-<?php echo $get_package->post_name; ?>" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                            <span class="sr-only">上一页</span>
                        </a>
                        <a class="right carousel-control" href="#carousel-<?php echo $get_package->post_name; ?>" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                            <span class="sr-only">下一页</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
                
<?php }
}?>

注意事项 #

• 确保页面已经正确引入Bootstrap的CSS和JS依赖，以及Jquery基础库
• 原4列布局调整为3列，所以将卡片外层col-md-3修改为col-md-4
• 轮播默认开启自动切换，可通过data-interval属性自定义切换间隔时长，单位为毫秒

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