如何在wordpress轨道滑块F6循环

Question

我在html上的hbit轨道滑块工作得很好但是当我试图在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>