Foundation 6 Orbit Slider Issue

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

Leave a Reply

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