如何修复 bootstrap 4 轮播 wordpress 循环帖子？答案

【问题标题】：How to fix bootstrap 4 carousel wordpress loop post?如何修复 bootstrap 4 轮播 wordpress 循环帖子？
【发布时间】：2019-08-18 09:25:34
【问题描述】：

如何在 Wordpress 自定义帖子类型中使用动态引导 4 轮播？

代码：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <?php
            $args = array(
            'post_type' => 'post',
            'posts_per_page' => -1,
            'category_name'=> 'slider'
        );

        $posts = new WP_Query( $args );
        while( $posts->have_posts() ):
            $posts->the_post();
        ?>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="<?php the_post_thumbnail_url('full')?>" class="d-block w-100" alt="...">
    </div>
        </div>
        <?php 
                endwhile;
                wp_reset_query();
            ?>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="fa fa-square fa-lg " aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

我想使用 Wordpress 自定义帖子类型使轮播动态化

【问题讨论】：

how can fix that? 是什么错误？
因此，如果您的上述代码是准确的，那么您将 .active 应用于每个 .carousel-item ...您是否尝试过解决该问题以查看是否是您的问题？

标签： php wordpress twitter-bootstrap bootstrap-4

【解决方案1】：

错误就在这里：

<img src="<?php the_post_thumbnail_url('full')?>" class="d-block w-100" alt="...">

改成

<img src="<?= the_post_thumbnail_url('full') ?>" class="d-block w-100" alt="...">

您需要回显函数的结果才能输出数据。

【讨论】：

那张图片想告诉我什么？如果您注意到我不使用
我按照我说的做了，照片就是结果
那是你当时要找的吗？
没有。我把所有的照片都放在一个地方！！ www3.0zz0.com/2019/03/27/21/930436695.png
试着把
从你的 while 循环中取出来，你正在制作 3 个轮播内部

【解决方案2】：

解决方案 1：

您的上述查询应该可以在 carousel-inner div 之后添加您的 while 循环并尝试删除活动类而是活动类添加一个计数器

在你的 while 循环之前添加一个变量 $i=0;并在活动类中添加贝洛代码

<?php if($i==0) echo 'active'; ?>

并在循环内添加 $i++;

就是这样。

解决方案 2：

如果您无法从上述查询中获得结果，请尝试这个

            <div class="carousel-inner">
                <?php $slider = get_posts(array('post_type' => 'carouselposttype', 'posts_per_page' => 3)); ?>
                <?php $count = 0; ?>
                <?php foreach ($slider as $slide) : ?>
                    <div class="carousel-item single-slider <?php echo ($count == 0) ? 'active' : ''; ?>">
                        <img class="bannerimg" src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($slide->ID)) ?>" alt="First slide">
                        <div class="carousel-caption  d-m">
                            <?php echo $slide->post_content ?>
                        </div>
                    </div>
                    <?php $count++; ?>
                <?php endforeach; ?>
            </div>

希望这会对某人有所帮助。谢谢

【讨论】：