Foundation 4 Orbit Slider Todas as Imagens de Uma Vez / Não Scrollable - html, sass, zurb-foundation, orbit

Eu não consigo entender por que o slider não funciona exatamente como o da página da documentação aqui: http://foundation.zurb.com/docs/components/orbit.html

Nosso site é Aqui:

Aqui está o código. Eu acho que é suposto ser essa marcação mínima e que o resto do material deve ser adicionado mais tarde:

      <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>

Inicialização do 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>

Apesar dos meus melhores esforços para copiar o exemplo emNa página de documentos, o controle deslizante da imagem em órbita exibe todas as imagens de cima para baixo com as balas e as setas. Cometi um erro ou há algo errado com o exemplo nos documentos da fundação 4?

Obrigado!

Respostas:

2 para resposta № 1

Você parece não ter seguido com cuidado o Seção de instalação de Javascript da documentação da Fundação.

Você perdeu pelo menos dois passos:

• requerer jQuery;
• inicializar Foundation.

Além disso, o código fornecido na pergunta é diferente do código que você tem na página real. Na página que você usa <ul class= "data-orbit"> enquanto o código correto é <ul data-orbit>.

Aqui está uma demonstração de tudo configurado corretamente: http://jsbin.com/ixuluw/3/edit

---

0 para resposta № 2

Obrigado lolmaus. Descobriu-se que depois de mudar o <ul class="data-orbit"> de volta para <ul data-orbit> e mudando:

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

para

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

Em seguida, aparece para carregar zepto ou jquerycorretamente, juntamente com o script de órbita. Eu devo ter perdido a mudança, porque todos os arquivos javascript estão na nova pasta. Eu devo ter estado bastante cansado. Obrigado novamente!

---