php - Bootstrap 4轮播动态为Wordpress

问题描述

这是我的问题！我正在尝试使用 html bootstrap 4 默认轮播编写一个 wordpress 滑块，但我发现有些困难，因为我是 php 中的新手！我在这里寻找是否有人可以给我一个从 wordpress 类别中获取 bootstrap 4 carousel 图像的示例

这是从标签获取图像的示例：

         <?php $args = array(

            'posts_per_page' => 5,

            'tag' => 'slider'

         );

         $slider = new WP_Query($args);

         if($slider->have_posts()):

         $count = $slider->found_posts;

         ?>

            <ol class="carousel-indicators">

               <?php for($i = 0; $i < $count ;  $i++) { ?>

                      <li data-target="#main-slider" data-slide-to="<?php echo $i; ?>" class="<?php echo ($i == 0) ? 'active' : ''?>"></li>

                <?php } ?>

            </ol> <!--.carousel-indicators-->



            <div class="carousel-inner" role="listbox">

               <?php $i = 0; while($slider->have_posts()): $slider->the_post(); ?>

                   <div class="carousel-item <?php echo ($i == 0) ? 'active' : ''?>">

                         <?php the_post_thumbnail( 'slider', array(

                                                                 'class' => 'd-block img-fluid',

                                                                 'alt' => get_the_title() ) ) ; ?>

                         <div class="carousel-caption d-none d-md-block">

                             <h3 class="text-uppercase"><?php echo get_the_content(); ?></h3>

                         </div>

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

                <?php $i++; endwhile; ?>

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





            <a href="#main-slider" class="carousel-control-prev" data-slide="prev">

                <span class="carousel-control-prev-icon" aria-hidden="true"></span>

                <span class="sr-only">Previous</span>

            </a>

            <a href="#main-slider" class="carousel-control-next" data-slide="next">

                <span class="carousel-control-next-icon" aria-hidden="true"></span>

                <span class="sr-only">Next</span>

            </a>



         <?php endif;  wp_reset_postdata(); ?>

      </div>

标签： phpwordpresshtml

php - Bootstrap 4轮播动态为Wordpress

问题描述

解决方案

推荐阅读