时间戳

首页 > 解决方案 > 如何将当前的 Bootstrap 卡片视图显示更改为 Bootstrap Carousel？

php - 如何将当前的 Bootstrap 卡片视图显示更改为 Bootstrap Carousel？

问题描述

下面是我的代码，帖子在卡片上显示得很好，但我尝试了很多次将其更改为轮播，但没有奏效。

我想使用下面链接中的相同轮播。

轮播参考：https ://gosnippets.com/snippets/bootstrap-carousel-with-cards-in-3-columns

<?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>
                        <div class="packages_cards row">
                            <?php
                                $podcasts = get_field('podcasts', $get_package->ID);
                                $minimum_price = get_field('minimum_price', $get_package->ID);
                                $package_title = 'Pay at least $'.$minimum_price.' for these '.$podcast_count.' items';
                                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');
                                ?>
                                                            
                                <div class="col-md-3">
                                    <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 }?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                
        <?php }
        }?>

标签： phpwordpressbootstrap-4carousel

解决方案

I have to make it all HTML to see that if it works. I hope you can rewrite it back to PHP later.

<div class="row">
    <div class="col-md-12">
        <div class="packages_list_body">
            <div class="packages_cards_inner_wrap" id="package-xxx">
                <h2 id="bundle_p_title" style="color:#a52a2a; margin-left: 12px;">Title here</h2>

                <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">

                        <div class="carousel-item active group-of-cards">
                            <div class="packages_cards row">
                                <div class="col-md-3">
                                    <div class="card">
                                        <img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="sample" class="card-img-top">
                                        <div class="card-body">
                                            <h3>Post title1</h3>
                                            <p> Hello, This is ia test episode of Abbot and Costello hope you guys have enjoyed listening...</p>
                                        </div>
                                        <!--.card-body-->
                                    </div>
                                    <!--.card-->
                                </div>
                                <!--.col-xxx-x-->
                                <div class="col-md-3">
                                    <div class="card">
                                        <img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="sample" class="card-img-top">
                                        <div class="card-body">
                                            <h3>Post title2</h3>
                                            <p> Hello, This is ia test episode of Abbot and Costello hope you guys have enjoyed listening...</p>
                                        </div>
                                        <!--.card-body-->
                                    </div>
                                    <!--.card-->
                                </div>
                                <!--.col-xxx-x-->
                                <div class="col-md-3">
                                    <div class="card">
                                        <img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="sample" class="card-img-top">
                                        <div class="card-body">
                                            <h3>Post title3</h3>
                                            <p> Hello, This is ia test episode of Abbot and Costello hope you guys have enjoyed listening...</p>
                                        </div>
                                        <!--.card-body-->
                                    </div>
                                    <!--.card-->
                                </div>
                                <!--.col-xxx-x-->
                            </div>
                            <!--.packages_cards-->
                        </div>
                        <!--.group-of-cards-->
                        
                        <div class="carousel-item group-of-cards">
                            <div class="packages_cards row">
                                <div class="col-md-3">
                                    <div class="card">
                                        <img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="sample" class="card-img-top">
                                        <div class="card-body">
                                            <h3>Post title4</h3>
                                            <p> Hello, This is ia test episode of Abbot and Costello hope you guys have enjoyed listening...</p>
                                        </div>
                                        <!--.card-body-->
                                    </div>
                                    <!--.card-->
                                </div>
                                <!--.col-xxx-x-->
                                <div class="col-md-3">
                                    <div class="card">
                                        <img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="sample" class="card-img-top">
                                        <div class="card-body">
                                            <h3>Post title5</h3>
                                            <p> Hello, This is ia test episode of Abbot and Costello hope you guys have enjoyed listening...</p>
                                        </div>
                                        <!--.card-body-->
                                    </div>
                                    <!--.card-->
                                </div>
                                <!--.col-xxx-x-->
                                <div class="col-md-3">
                                    <div class="card">
                                        <img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="sample" class="card-img-top">
                                        <div class="card-body">
                                            <h3>Post title6</h3>
                                            <p> Hello, This is ia test episode of Abbot and Costello hope you guys have enjoyed listening...</p>
                                        </div>
                                        <!--.card-body-->
                                    </div>
                                    <!--.card-->
                                </div>
                                <!--.col-xxx-x-->
                            </div>
                            <!--.packages_cards-->
                        </div>
                        <!--.group-of-cards-->

                    </div>
                    <!--.carousel-inner-->
                </div>
                <!--.carousel-->

            </div>
            <!--.packages_cards_inner_wrap-->
        </div>
        <!--.packages_list_body-->
    </div>
</div>
<!--.row-->

See it in action ( https://jsfiddle.net/qt60whLf/ ).

Bootstrap 4 document ( https://getbootstrap.com/docs/4.0/components/carousel/ ).

推荐阅读