首页 > 解决方案 > 动态引导 4 图像轮播不工作

问题描述

bootstrap 4 carousel我的静态网站上有一个工作图像。

但是当我想要为我的WordPress主题动态地使用它时,图像没有显示。但是,在源代码中,图像显示得非常好。

这是图像轮播中的代码片段:

<div id="slider" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <?php $args = array('cat' => 2,'post_per_page' => 4);
        $slider = new WP_Query($args);
        if( $slider -> have_posts() ) : 
            /* start the loop */
            while ($slider -> have_posts() ) : $slider -> the_post();
            $thumb_id = get_post_thumbnail_id();
            $thumb_url = wp_get_attachment_image_src($thumb_id,'full',true); ?>

            <div class="carousel-item <?php if($i === 0): ?>active<?php endif; ?>">
                <?php if ($thumb_url !== false) : ?>
                <img class="d-block img-fluid" src="<?= $thumb_url[0] ?>" width="<?= $thumb_url[1] ?>" height="<?= $thumb_url[2] ?>" />
                <?php endif; ?>
            </div>
            <?php endwhile; /* end of the loop */
                wp_reset_postdata();
                endif;
                    ?>
     </div>
    <!-- Prev,Next Btn -->
    <a href="#slider" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a href="#slider" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

标签: wordpresshtmlbootstrap-4

解决方案


推荐阅读