I built an orbit function with the Foundation 6 framework which I liked, but when pasting it to a WordPress theme (which is a program I am completely new to) it does not seem to work (only the bottom buttons appear).
Could anyone help me please?
Here’s my code:

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <ul class="orbit-container">
    <button class="arrows orbit-previous"><span class="show-for-sr">Previous Post</span>◀︎</button>
    <button class="arrows orbit-next"><span class="show-for-sr">Next Post</span>▶︎</button>
    <li class="is-active orbit-slide">
      <div class="post">
        <blockquote>
          <i class="fa fa-quote-left quotes"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <i class="fa fa-quote-right quotes"></i>
        </blockquote>
        <cite>The standard Lorem Ipsum passage</cite>
      </div>
    </li>
    <li class="orbit-slide">
      <div class="post">
        <blockquote>
          <i class="fa fa-quote-left quotes"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <i class="fa fa-quote-right quotes"></i>
        </blockquote>
        <cite>The standard Lorem Ipsum passage</cite>
      </div>
    </li>
    <li class="orbit-slide">
      <div class="post">
        <blockquote>
          <i class="fa fa-quote-left quotes"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <i class="fa fa-quote-right quotes"></i>
        </blockquote>
        <cite>The standard Lorem Ipsum passage</cite>
      </div>
    </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 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>

Read more here: Import Foundation Orbit into WordPress


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: