Wie in Wordpress Orbit Slider F6

Question

Ich habe die HTML von Orbit Slider auf HTML funktioniert perfekt, aber wenn ich versuche, es auf WordPress etwas schief geht schief geht, funktioniert die Navigation Kugeln und Pfeile nur einen Klick.

 <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> 

Und das ist meine Wordpress-Schleife:

<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

Sie sollten zwei Schleifen machen. Die erste Schleife sollte nur 1 Post zeigen, was die aktive Folie sein wird. Die zweite Schleife zeigt die verbleibenden mit einer 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>