WordPress最新帖子輪播

Question

我試圖在旋轉木馬中獲得最新的WordPress帖子，我收到沒有錯誤，但也沒有結果！

這裏是我使用的代碼...

<div class = "jumbotron"> 
    <div id  = "carousel-example-generic" 
     class  = "carousel slide" 
     data-ride = "carousel"> 
     <?php 
      $my_query = new WP_Query(); 
      $my_query -> query('showposts = 12'); 
      $x == 0; 
      $do_not_duplicate = $post -> ID; 

      echo ' <ol class = "carousel-indicators">\n'; 

      while ($my_query -> have_posts()) : $my_query->the_post(); 

       echo '  <li data-target = \"#carousel-example-generic\" data-slide-to = "' . 
          $x . 
         '"'; 

       $x++; 

       if($x == 0) 
       { 
        echo ' class = \"active\"'; 
       } 

       echo '>\n' . 
        '  </li>\n'; 
      endwhile; 

      echo ' </ol>\n'; 
     ?> 

     <!-- Carousel items --> 
     <div class="carousel-inner"> 
      <?php 
       $x == 0; 

       while ($my_query -> have_posts()) : $my_query -> the_post(); 
      ?> 

      <div class = "<?php if ($x == 0){ echo 'active item';} else { echo 'item';}?>"> 
       <a href = "<?php the_permalink() ?>" 
        title = "<?php the_title();?>"> 
        <?php echo get_the_post_thumbnail($id, 
                 'sliderimg');?> 
       </a> 

       <div class = "carousel-caption"> 
        <a href = "<?php the_permalink()?>" 
         rel = "bookmark" 
         title = "Permanent Link to <?php the_title_attribute();?>"> 
         <?php the_title(); ?> 
        </a> 
       </div> 
      </div> 

      <?php 
       endwhile; 
      ?> 
     </div> 

     <!-- Carousel nav --> 
     <a class  = "left carousel-control" 
      data-slide = "prev" 
      href  = "#carousel-example-generic"> 
      <span class = "glyphicon glyphicon-chevron-left"> 
      </span> 
     </a> 

     <a class = "right carousel-control" 
      data-slide = "next" 
      href = "#carousel-example-generic"> 
      <span class = "glyphicon glyphicon-chevron-right"> 
      </span> 
     </a> 

     <?php 
      wp_reset_query(); 
     ?> 
    </div> 
</div> 

這裏是我的JS：

jQuery(document).ready(function($) 
          { 
           $('.carousel').carousel({ 
                  interval : 1000 
                 } 
                 ) 
          } 
         ); 

請幫助我，如果你有任何想法。

對不起，但這裏是虛擬文本只是爲了這個網站讓我發佈我的問題！我的問題很簡單明瞭，我不知道我應該怎麼說才能發表我的問題！

Answer 1

第一，下載這個滑塊 https://tympanus.net/codrops/2011/08/16/circular-content-carousel/ 添加您的JS和CSS文件到你的主題目錄中張貼while循環替換此代碼

<div id="primary" class="content-area"> 
     <main id="main" class="site-main" role="main"> 
<div class="container"> 
      <div id="ca-container" class="ca-container"> 
       <div class="ca-wrapper"> 
      <?php 
      if (have_posts()) : 

       /* Start the Loop */ 
       while (have_posts()) : the_post(); 
?> 

       <div class="ca-item ca-item-1"> 
         <div class="ca-item-main"> 
          <div class="ca-icon"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> 
     <?php the_post_thumbnail(); ?> 
    </a></div> 
          <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3> 
          <h4> 
           <span class="ca-quote">&ldquo;</span> 
           <span><?php the_excerpt(); ?></span> 
          </h4> 
           <a href="#" class="ca-more">more...</a> 
         </div> 
         <div class="ca-content-wrapper"> 
          <div class="ca-content"> 
           <h6><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h6> 
           <a href="#" class="ca-close">close</a> 
           <div class="ca-content-text"> 
            <p><?php the_content(); ?></p> 
           </div> 
           <ul> 
            <li><?php the_time('F jS, Y'); ?></li> 
            <li></li> 
            <li><?php the_author_posts_link(); ?></li> 
           </ul> 
          </div> 
         </div> 
        </div> 
        <?php 

       endwhile; 



      else : 

       get_template_part('template-parts/post/content', 'none'); 

      endif; 
      ?> 
      </div> 
      </div> 
      </div> 

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/demo.css" /> 
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/style2.css" /> 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.contentcarousel.js"></script> 
<script type="text/javascript"> 
$('#ca-container').contentcarousel(); 
</script> 

     </main><!-- #main --> 
    </div><!-- #primary --> 

它會像同

https://tympanus.net/Development/CircularContentCarousel/