Question

我使用Foundation 6，我想使用Orbit为船只租户显示多张图片。但它不能正常工作。我可以使用上一个按钮但不能使用下一个按钮。使用一次后，没有任何作用。

这是一个例子： http://www.boatvisor.com/renters/1

视图/布局/ 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)

视图/房客/ .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

资产/ Javascript角/ application.js中

//= require jquery
//= require jquery_ujs
//= require underscore
//= require gmaps/google
//= require foundation
//= require gritter
//= require_tree .
$(document).foundation();

资产/样式表/ application.scss

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

Answer 1

将Motion UI css添加到您的页面：

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

轨道基金会 - 不起作用

1 个答案: