Databases
StackOverflow2013
Postsdbo
POTrying to use Foundation's Orbit slider in Rails/Ember app
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrying to use Foundation's Orbit slider in Rails/Ember app
    text
    copied!<p>I have a rails app that is using both the Ember and Foundation gems. All has been working as expected until I tried to use Foundation's Orbit slider -- <a href="http://foundation.zurb.com/docs/components/orbit.html" rel="nofollow noreferrer">http://foundation.zurb.com/docs/components/orbit.html</a>.</p> <p>The Foundation gem includes all of the js files in the body tag so both files I need -- foundation.js and foundation.orbit.js -- are there.</p> <p>The only other instructions are to attach <code>data-orbit</code> to whatever element you want to slide through. Mine looks like:</p> <pre><code>&lt;ul data-orbit&gt; &lt;li&gt;&lt;img src="/assets/ewabout_1.jpg" class="carousel-pics"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="/assets/ewabout_2.jpg" class="carousel-pics"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="/assets/ewabout_3.jpg" class="carousel-pics"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="/assets/ewabout_4.jpg" class="carousel-pics"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="/assets/ewabout_5.jpg" class="carousel-pics"&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>But when I load the page the images are just stacked on top of one another, like the app can't find the javascript.</p> <p>I feel like this is probably an ember issue, but I'm not sure. Is there something I need to add to the Ember View?</p> <p><img src="https://i.stack.imgur.com/wmR6K.png" alt="App directory"></p> <p><strong>UPDATE</strong></p> <p>Changed <code>application.js</code> to the following and the slider renders, but multiplies bullets/buttons etc down the page resulting in the site crashing. But at least it gets the slider moving?</p> <pre><code>//= require jquery //= require jquery_ujs //= require foundation //= require handlebars //= require ember //= require_self //= require ew Ew = Ember.Application.create({ ready: function () { setInterval(function() { $(document).foundation(); }, 2000); } }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload