在自定义 post 类型滑块上添加导航链接

Question

我正在从头开始开发 Wordpress 主题。我有几个部分，其中一个显示视频和一些推荐。我已经设法使用自定义 post 类型（其中每个推荐都是 post）和一个隐藏和显示每个 post 的脚本构建（像这样：http://www.wpbeginner.com/wp-tutorials/how-to-add-rotating-testimonials-in-wordpress/）一个不错的动态推荐滑块=28=]，做一个简单但有趣的过渡。

现在我需要在滑块下添加一个类似于 Carousel 的导航（带有那些漂亮的小点）。问题是：我尝试了很多解决方案，但其中 none 行得通。有人可以为我发光吗？

这是我用来显示自定义 posts 循环的代码：

<div class="depo-wrap">
   <div class="depoimentos">
   <?php
      $args = array( 'post_type' => 'testimonial', 'posts_per_page' => 10 );
      $loop = new WP_Query( $args );
      if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
      $data = get_post_meta( $loop->post->ID, 'testimonial', true );
      static $count = 0;

      if ($count == "1") { ?>
         <div class="slide" style="display: none;">
            <div class="citacao"><?php the_content(); ?></div>
            <div class="info-pessoal"><?php echo $data[ 'nome-pessoa' ]; ?><span> | </span><?php echo $data[ 'local-origem' ]; ?></div>
            <div class="cargo"><?php echo $data[ 'cargo' ]; ?></div>
         </div>
      <?php } else { ?>
         <div class="slide">
            <div class="citacao"><?php the_content(); ?></div>
            <div class="info-pessoal"><?php echo $data[ 'nome-pessoa' ]; ?><span> | </span><?php echo $data[ 'local-origem' ]; ?></div>
            <div class="cargo"><?php echo $data[ 'cargo' ]; ?></div>
         </div>

    <?php 
       $count++; } 
       endwhile; 
       endif; ?>
    </div>
</div>

下面是让一切正常运行的脚本：

$(document).ready(function(){
  $('.depoimentos .slide');
  setInterval(function(){
    $('.depoimentos .slide').filter(':visible').fadeOut(1000,function(){
      if($(this).next('.slide').size()){
        $(this).next().fadeIn(1000);
      } else {
        $('.depoimentos .slide').eq(0).fadeIn(1000);
      }
    });
  }, 15000); 
});

TL;DR: 我这里有这段代码，我正在尝试添加一些类似 Carousel 的项目符号，甚至一些 next/prev 按钮。我只想向我在 Wordpress 中使用自定义 post 类型创建的这张证明幻灯片添加导航。

Answer 1

添加 Bootstrap 旋转木马成功了（感谢@Enrico）！这是经过一些修改的代码：

<div id="carousel-depoimentos" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
   <div class="carousel-inner depoimentos">
      <?php
         $args = array( 'post_type' => 'testimonial', 'posts_per_page' => 1 );
         $loop = new WP_Query( $args );
         if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
         $data = get_post_meta( $loop->post->ID, 'testimonial', true );
      { ?>

   <div class="item active">
      <div class="citacao"><?php the_content(); ?></div>
      <div class="info-pessoal"><?php echo $data[ 'nome-pessoa' ]; ?><span> | </span><?php echo $data[ 'local-origem' ]; ?></div>
      <div class="cargo"><?php echo $data[ 'cargo' ]; ?></div>
   </div>

   <?php 
      }
      endwhile; 
      endif; 
      wp_reset_postdata();
   ?> 

   <?php
      $args = array( 'post_type' => 'testimonial', 'posts_per_page' => 10, 'offset' => 1 );
      $loop = new WP_Query( $args );
      if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
      $data = get_post_meta( $loop->post->ID, 'testimonial', true );
   { ?>

   <div class="item">
      <div class="citacao"><?php the_content(); ?></div>
      <div class="info-pessoal"><?php echo $data[ 'nome-pessoa' ]; ?><span> | </span><?php echo $data[ 'local-origem' ]; ?></div>
      <div class="cargo"><?php echo $data[ 'cargo' ]; ?></div>
   </div>

   <?php 
      }
      endwhile; 
      endif; 
      wp_reset_postdata();
   ?>
   </div>                       
</div>

在自定义 post 类型滑块上添加导航链接

Adding navigation links on custom post type slider

javascript

wordpress

jquery

testimonials

custom-post-type