Orbit Foundation - funktioniert nicht

Question

Ich benutze Foundation 6 und möchte Orbit verwenden, um mehrere Bilder für einen Bootsvermieter anzuzeigen. Aber es funktioniert nicht richtig. Ich kann die vorherige Schaltfläche verwenden, aber nicht die nächste. Und nach einmaligem Gebrauch funktioniert nichts.

Hier ist es ein Beispiel: http://www.boatvisor.com/renters/1

views/layout/application.html.haml

!!! 
%html.no-js{:lang => "fr"} 
    %head 
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/ 
    = render 'layouts/head' 
    - if Rails.env.production? 
     = render 'shared/analytics' 
    %body 
    %header.container 
     = render 'layouts/header' 

    - if notice 
     %p.alert.alert-success= notice 
    - if alert 
     %p.alert.alert-danger= alert 
    %div 
     = yield 
    %div 
     = render 'layouts/footer' 
    %script{:src => "https://code.jquery.com/jquery-2.2.0.min.js"} 
    %script{:src => "https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"} 
    %script{:src => "https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.js"} 
    %script{:src => "https://cdn.jsdelivr.net/foundation/6.2.0/js/foundation.core.js"} 
    %script{:src => "https://cdn.jsdelivr.net/foundation/6.2.0/js/foundation.orbit.js"} 
    %script{:src => "https://cdn.jsdelivr.net/foundation/6.2.0/js/foundation.reveal.js"} 
    %script{:src => "//maps.google.com/maps/api/js", :type => "text/javascript"} 
    %script{:src => "//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js", :type => "text/javascript"} 

    = javascript_include_tag "application" 

    = yield(:js) 

views/Mieter/.html.haml

.row 
    .large-8.columns.renter-picture 
    %ul.orbit-container{"data-orbit" => ""} 
     - @renter.photos.each do |pic| 
     %button.orbit-previous 
      %span.show-for-sr Previous Slide 
      ◀︎ 
     %button.orbit-next 
      %span.show-for-sr Next Slide 
      ▶︎ 
     %li.orbit-slide 
      = image_tag pic.image 

assets/Javascripts /application.js

Vermögenswerte/Stylesheets/application.scss

*= require_self 
*= require gritter 
*= require jquery-ui 
*= require commontator/application 
*= require_tree . 
*/ 

Answer 1

In den Motion UI CSS auf Ihre Seite:

http://foundation.zurb.com/sites/docs/motion-ui.html#installing