如何循环在wordpress轨道滑块F6

Question

我有html上的轨道滑块上的html工作完美，但当我试图在wordpress上循环它出错了，导航子弹和箭头只工作一次点击。

 <div class="slider-options"> 
     <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit> 
      <ul class="orbit-container"> 
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><i class="fa fa-2x">&#xf104;</i></button> 
      <button class="orbit-next"><span class="show-for-sr">Next Slide</span><i class="fa fa-2x">&#xf105;</i></button> 
      <li class="orbit-slide"> 
       <img class="orbit-image" src="img/slider-img.jpg" alt="Space"> 
       <figcaption class="orbit-caption">Space, the final frontier.</figcaption> 
      </li> 
      <li class="orbit-slide"> 
       <img class="orbit-image" src="img/slider-img.jpg" alt="Space"> 
       <figcaption class="orbit-caption">Lets Rocket!</figcaption> 
      </li> 
      <li class="orbit-slide"> 
       <img class="orbit-image" src="img/slider-img.jpg" alt="Space"> 
       <figcaption class="orbit-caption">Encapsulating</figcaption> 
      </li> 
      <li class="orbit-slide"> 
       <img class="orbit-image" src="img/slider-img.jpg" alt="Space"> 
       <figcaption class="orbit-caption">Outta This World</figcaption> 
      </li> 
      </ul> 
      <nav class="orbit-bullets"> 
      <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button> 
      <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button> 
      <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button> 
      <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button> 
      </nav> 
     </div> 
     </div> 

这是我的wordpress循环：

<div class="slider-options"> 
      <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit> 
       <ul class="orbit-container"> 
       <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><i class="fa fa-2x">&#xf104;</i></button> 
       <button class="orbit-next"><span class="show-for-sr">Next Slide</span><i class="fa fa-2x">&#xf105;</i></button> 

       <?php 
       $args1 = array(
       'posts_per_page' => 3, 
       'category' => 'slider', 
       ); 
       $query1 = new WP_Query($args1); ?> 
       <?php if ($query1->have_posts()) : ?> 
       <?php while ($query1->have_posts()) : $query1->the_post(); ?> 

        <li class="orbit-slide"> 
        <?php the_post_thumbnail('slider', array('class' => 'orbit-image')); ?> 
        <figcaption class="orbit-caption"><?php the_title(); ?></figcaption> 
        </li> 

       <?php endwhile; ?> 
       <?php wp_reset_postdata(); ?> 
       <?php else : ?> 
        <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
       <?php endif; ?> 

       </ul> 
       <nav class="orbit-bullets"> 
       <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button> 
       <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button> 
       <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button> 
       <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button> 
       </nav> 
      </div> 
      </div> 

Answer 1

你应该让两个循环。第一个循环应该只显示1个帖子，这将是活动幻灯片。第二个循环显示余下的一个offset => 1

<div class="slider-options"> 
      <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit> 
       <ul class="orbit-container"> 
       <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span><i class="fa fa-2x">&#xf104;</i></button> 
       <button class="orbit-next"><span class="show-for-sr">Next Slide</span><i class="fa fa-2x">&#xf105;</i></button> 

       <?php 
       $args1 = array(
       'posts_per_page' => 1, 
       'category' => 'slider', 
       ); 
       $query1 = new WP_Query($args1); ?> 
       <?php if ($query1->have_posts()) : ?> 
       <?php while ($query1->have_posts()) : $query1->the_post(); ?> 

        <li class="orbit-slide is-active"> 
        <?php the_post_thumbnail('slider', array('class' => 'orbit-image')); ?> 
        <figcaption class="orbit-caption"><?php the_title(); ?></figcaption> 
        </li> 

       <?php endwhile; ?> 
       <?php wp_reset_postdata(); ?> 
       <?php else : ?> 
        <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
       <?php endif; ?> 

       <?php 
        $args1 = array(
        'posts_per_page' => -1, 
        'category'  => 'slider', 
        'offset'   => 1 
        ); 
        $query1 = new WP_Query($args1); ?> 
        <?php if ($query1->have_posts()) : ?> 
        <?php while ($query1->have_posts()) : $query1->the_post(); ?> 

       <li class="orbit-slide"> 
       <?php the_post_thumbnail('slider', array('class' => 'orbit-image')); ?> 
       <figcaption class="orbit-caption"><?php the_title(); ?></figcaption> 
       </li> 

      <?php endwhile; ?> 
      <?php wp_reset_postdata(); ?> 
      <?php else : ?> 
       <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 
      <?php endif; ?> 

       </ul> 
       <nav class="orbit-bullets"> 
       <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button> 
       <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button> 
       <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button> 
       <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button> 
       </nav> 
      </div> 
      </div>