Foundation Orbit Slider Issue on WordPress

I tried implementing a Foundation 6 orbit slider in WordPress, but for some reason the auto-slide locks on the second post.
Here’s the code:

<div class="orbit" role="region" aria-label="Customers Testimonials" data-orbit>
        <ul class="orbit-container">

          <?php $slider = new WP_Query(array('post_type' => 'testimonials', 'orderby' => 'date', 'posts_per_page' => 3)); ?>
          <?php if($slider->have_posts()) : ?>

            <?php while($slider->have_posts()) : $slider->the_post(); ?>
              <li class="is-active orbit-slide">
                <div class="post">
                    <i class="fa fa-quote-left quotes"></i>
                      <?php the_content(); ?>
                    <i class="fa fa-quote-right quotes"></i>
                  <cite><?php the_title(); ?></cite>
                </div><!-- .post -->
            <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>

          <?php endif; ?>
        <nav class="orbit-bullets">
          <button class="is-active" data-slide="0"><span class="show-for-sr">First post</span><span class="show-for-sr">Current post</span></button>
          <button data-slide="1"><span class="show-for-sr">Second post</span></button>
          <button data-slide="2"><span class="show-for-sr">Third post</span></button>
      </div><!-- .orbit -->

In terms of js files, I’ve included the following:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/foundation.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/foundation.orbit.min.js"></script>

Would anyone have any idea about how to correct this please?
Thank you all in advance.

Read more here: Foundation Orbit Slider Issue on WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *