As I am still not too familiar with WordPress, I tried to convert a Foundation 6 orbit slider into wordpress to display some text posts, but is jams as soon as it auto-slides to the following, or if the user clicks on any of the bullet points. Also and for whatever reason, the tags are displayed on the lines before and after the_content() text
Here’s the code:

<div class="orbit" role="region" aria-label="Customers Testimonials" data-orbit data-use-m-u-i="true">
  <ul class="orbit-container">
    <?php $slider = new WP_Query(array('post_type' => 'testimonials', 'orderby' => 'date', 'posts_per_page' => 3)); ?>
    <?php while($slider->have_posts()) : $slider->the_post(); ?>
      <li class="is-active orbit-slide">
        <div class="post">
          <blockquote>
            <i class="fa fa-quote-left quotes"></i>
              <?php the_content(); ?>
            <i class="fa fa-quote-right quotes"></i>
          </blockquote>
          <cite><?php the_title(); ?></cite>
        </div><!-- .post -->
      </li>
    <?php endwhile; wp_reset_query(); ?>
  </ul>
  <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>
  </nav>
</div><!-- .orbit -->

Both foundation.min.js and foundation.orbit.min.js are properly initialised, as well as the foundation call.
Would anyone be able to help please? Thank you all in advance =)

Read more here: Foundation 6 Orbit Slider Issue


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: