How to create an Orbit slide show based on the zurb foundation? I stubbornly tried to create an Orbit slide show based on zurb foundation 6 framework.

I followed all the steps on the instruction page:Orbit Slide Show.

I added everything needed for this type of slide show and included below CSS and Java Script classes in theme library:


motion-ui.css 
foundation.css
foundation.js
jquery.js


The template code I used is here: Orbit SlideShow Problem

But unfortunately all images display vertically below each other (one image below another) and the Previous / Next button does not work properly, see below image:



I would be happy to hear what the problem is, share your experiences and guide me to know what is the right way to load that slideshow?
After many days searching for cause of this problem in throughout of the web resources, forums and reading variety of article, I fond that this issue for this that I don't
keep the Priority of foundation Files Structure in my library, According to the  Zurb Foundation documentation in this page: Installing JavaScript


  It's important that you Make sure "Foundation.js" (or
  Foundation.min.js) files loads after "jQuery.js" (or jquery.min.js).