Фонд 4 Орбіта слайдер Всі зображення одноразово / не прокручуються - html, sass, zurb-foundation, orbit

Я не можу зрозуміти, чому повзунок не виконує точно так, як на сторінці документації, тут: http://foundation.zurb.com/docs/components/orbit.html

Наш сайт є тут:

Ось код. Я думаю, що це повинна бути така мінімальна розмітка, а решта матеріалу повинна бути додана пізніше:

      <ul data-orbit>
<li>
<img src="/images/img/sliders/lightcubebeta1000.png" >
<div class="orbit-caption">...</div>
</li>
<li>
<img src="/images/img/sliders/hammertime1000.png">
<div class="orbit-caption">...</div>
</li>
<li>
<img src= "img/sliders/alarmclockbeta1000.png">
<div class="orbit-caption">...</div>
</li>
</ul>

Ініціалізація Javascript:

 <!-- Javascript for Orbit Image Slider -->
<script>
document.write("<script src=`javascripts/vendor/"
+ ("__proto__" in {} ? "zepto" : "jquery")
+ ".js></script>")
</script>

<script src= "javascripts/foundation/foundation.js"></script>
<script src= "javascripts/foundation/foundation.dropdown.js"></script>
<script src= "javascripts/foundation/foundation.section.js"></script>
<script src= "javascripts/foundation/foundation.topbar.js"></script>
<script src= "javascripts/foundation/foundation.orbit.js"></script>

<!-- Initialize Foundation -->

<script>

$(document).foundation("orbit", {
timer_speed: 10000,
pause_on_hover: true,
resume_on_mouseout: true,
animation_speed: 500,
bullets: true,
stack_on_small: true,
container_class: "orbit-container",
stack_on_small_class: "orbit-stack-on-small",
next_class: "orbit-next",
prev_class: "orbit-prev",
timer_container_class: "orbit-timer",
timer_paused_class: "paused",
timer_progress_class: "orbit-progress",
slides_container_class: "orbit-slides-container",
bullets_container_class: "orbit-bullets",
bullets_active_class: "active",
slide_number_class: "orbit-slide-number",
caption_class: "orbit-caption",
active_slide_class: "active",
orbit_transition_class: "orbit-transitioning"
});

</script>

Незважаючи на всі мої намагання скопіювати прикладсторінка документів, повзунок зображення орбіти відображає всі зображення відразу зверху донизу з кулями та стрілками. Чи помилилася я, чи є щось не так з прикладом у фонді 4 документів?

Спасибі!

Відповіді:

2 для відповіді № 1

Ви, схоже, не змогли ретельно дотримуватися Розділ інсталяції Javascript документації фонду.

Ви пропустили щонайменше два етапи:

• вимагати jQuery;
• ініціалізувати фонд.

Крім того, код, який ви вказали в питанні, відрізняється від коду, який ви маєте на фактичній сторінці. На сторінці, яку ви використовуєте <ul class= "data-orbit"> в той час як правильний код <ul data-orbit>.

Тут демонстрація всього належного налаштування: http://jsbin.com/ixuluw/3/edit

---

0 для відповіді № 2

Дякую, любовний Виявилося, що після зміни <ul class="data-orbit"> назад до <ul data-orbit> і змінюючи:

<script>
document.write("<script src=/js/vendor/"
+ ("__proto__" in {} ? "zepto" : "jquery")
+ ".js></script>");
</script>

до

<script>
document.write("<script src=`javascripts/vendor/"
+ ("__proto__" in {} ? "zepto" : "jquery")
+ ".js></script>")
</script>

Здається, що це завантажує zepto або jqueryправильно, разом із скриптом орбіти. Я повинен пропустити зміну, оскільки всі файли javascript знаходяться в новій папці. Мені довелося дуже втомитися. Знову дякую!

---