I have the html of orbit slider on html working perfectly but when i’m trying to loop it on wordpress something goes wrong, the navigation bullets and arrows works only one click.

      <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"></i></button>
            <button class="orbit-next"><span class="show-for-sr">Next Slide</span><i class="fa fa-2x"></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>

And this is my wordpress loop :

  <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"></i></button>
                <button class="orbit-next"><span class="show-for-sr">Next Slide</span><i class="fa fa-2x"></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>

Read more here: How to loop in wordpress Orbit Slider F6


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: