循環WP_Query旋轉木馬兩次

我正在嘗試使用Bootstrap構建圖像滑塊/旋轉木馬。這些圖像應該從我創建的Wordpress帖子類別'Aktuell'和'Referenz'中顯示。下面的代碼適合我，當我想要顯示來自類別'Aktuell'的1個圖像和來自'Referenz'類別的3個圖像時。循環WP_Query旋轉木馬兩次

<div id="myCarousel" class="carousel slide hidden-sm hidden-xs "> 
    <div class="carousel-inner"> 
     <?php 
     $the_query = new WP_Query(array(
      'category_name' => 'Aktuell', 
      'posts_per_page' => 1, 
     )); 
     while ($the_query->have_posts()) : 
      $the_query->the_post(); 
     ?> 
     <div class="item active"> 
      <a href="<?php the_permalink(); ?>"> 
       <?php the_post_thumbnail('full'); ?> 
       <div class="carousel-caption"> 
        <h3><?php the_title();?></h3> 
        <p><?php the_excerpt();?></p> 
        <h1>»</h1> 
       </div> 
      </a> 
     </div><!-- item active --> 
     <?php 
     endwhile; 
     wp_reset_postdata(); 
     ?> 
     <?php 
     $the_query = new WP_Query(array(
      'category_name' => 'Referenz', 
      'posts_per_page' => 3, 
      'orderby' => 'rand' 
     )); 
     while ($the_query->have_posts()) : 
      $the_query->the_post(); 
     ?> 
     <div class="item"> 
      <a href="<?php the_permalink(); ?>"> 
       <?php the_post_thumbnail('slider');?> 
       <div class="carousel-caption"> 
        <h3><?php the_title();?></h3> 
        <p><?php the_excerpt();?></p> 
        <h1>»</h1> 
       </div> 
      </a> 
     </div><!-- item --> 
     <?php 
     endwhile; 
     wp_reset_postdata(); 
     ?> 
    </div><!-- carousel-inner --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
</div><!-- #myCarousel -->

我想要做的就是從每個類別顯示3張照片。所以當我在＃6行上使用'posts_per_page' => 3,時，當我點擊左右箭頭來滑動時，滑動功能將不再起作用。相反，圖像顯示在彼此之下。

我該如何解決這個問題？

來源

2016-06-28 Reza

我能找到一種方法，使像這樣的工作：

function the_carousel_item($post, $post_per_page, $offset = 0, $orderby = 'rand', $active = NULL) { 
    $the_query = new WP_Query(array(
     'category_name' => $post, 
     'posts_per_page' => $post_per_page, 
     'orderby' => $orderby, 
     'offset' => $offset 
    )); 

    $active_css_class = (isset($active)) ? $active : ''; 
    while ($the_query->have_posts()) : 
     $the_query->the_post(); 
    ?> 
    <div class="item <?= $active_css_class ?>"> 
     <a href="<?php the_permalink(); ?>"> 
     <?php the_post_thumbnail('slider');?> 
     <div class="carousel-caption"> 
       <h3><?php the_title();?></h3> 
       <p><?php the_excerpt();?></p> 
       <h1>»</h1> 
     </div> 
    </a> 
    </div><!-- item --> 
    <?php 
    endwhile; 
    wp_reset_postdata(); 
} 

<div id="myCarousel" class="carousel slide hidden-sm hidden-xs "> 
    <div class="carousel-inner"> 
    <?php 
     // Display the starter image from the post 'Aktuell' 
     the_carousel_item('Aktuell', 1, 0, 'ID', 'active'); 

     // Display posts from 'Aktuell' 
     the_carousel_item('Aktuell', 3, 1, 'ID'); 

     // Display posts from 'Referenz' 
     the_carousel_item('Referenz', 3); 
    ?> 

    </div><!-- carousel-inner --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
</div><!-- #myCarousel --> 


<div class="container inner-cont container-contact-field"> 
    <div class="row mobile contact-field"> 
     <div class="col-xs-8 col-xs-offset-2"> 
      <?php dynamic_sidebar('footer_1'); ?> 
      <?php dynamic_sidebar('footer_2'); ?> 
     </div> 
    </div> 
</div>

來源

2016-06-29 06:38:35 Reza

你想在上面顯示1張圖片（Aktuell）和3張圖片滑塊在下面（Referenz），或者1張以上的滑塊，或者什麼？如果3下面的圖片，你的滑塊將無法正常工作，因爲你已經設置'posts_per_page' => 3

來源

2016-06-28 18:20:31 iMarshal

循環WP_Query旋轉木馬兩次

回答

相關問題