Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><strong>EDIT: THE FOUNDATION DOUMENTATION CONTAINS</strong></p> <pre><code>&lt;ul data-orbit="" class="orbit-slides-container"&gt; </code></pre> <p><strong>REMOVE: ="" class="orbit-slides-container" It did the TRICK FOR ME: SO it becomes:</strong></p> <pre><code>&lt;ul data-orbit&gt; </code></pre> <hr> <p>"Uncaught TypeError: Object # this is because jQuery has not loaded. Download jQuery from here <a href="http://jquery.com/download/" rel="nofollow">http://jquery.com/download/</a></p> <p>Link this jQuery file to your website</p> <p>Even if the jQuery file is linked properly make sure it is loaded in the </p> <p><code>&lt;head&gt;&lt;/head&gt;</code> tags before loading the foundation javascript files</p> <pre><code>&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt; Foundation 4&lt;/title&gt; &lt;!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. --&gt; &lt;link rel="stylesheet" href="foundation-4/css/normalize.css" /&gt; &lt;link rel="stylesheet" href="foundation-4/css/foundation.css" /&gt; &lt;script src="LINKTO JQUERY JS FILE"&gt;&lt;/script&gt; &lt;script src="foundation-4/js/vendor/custom.modernizr.js"&gt;&lt;/script&gt; &lt;/head&gt; </code></pre> <p><strong>EDIT:</strong></p> <pre><code>&lt;div class="row"&gt; &lt;div class="orbit-container"&gt; &lt;ul data-orbit="" class="orbit-slides-container"&gt; &lt;li&gt; &lt;img src="3.jpg"&gt; &lt;div class="orbit-caption"&gt;IMAGE 3&lt;/div&gt; &lt;/li&gt; &lt;li class="active"&gt; &lt;img src="1.jpg"&gt; &lt;div class="orbit-caption"&gt;IMAGE 1&lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;img src="2.jpg"&gt; &lt;div class="orbit-caption"&gt;IMAGE 2&lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;img src="3.jpg"&gt; &lt;div class="orbit-caption"&gt;IMAGE 3&lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;img src="1.jpg"&gt; &lt;div class="orbit-caption"&gt;IMAGE 1&lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>EDIT: TRY THIS</strong></p> <pre><code> &lt;div class="large-12 columns"&gt; &lt;div class="orbit-container"&gt; &lt;ul data-orbit&gt; &lt;li data-orbit-slide="headline-1"&gt; &lt;h2&gt;Headline 1&lt;/h2&gt; &lt;h3&gt;Subheadline&lt;/h3&gt; &lt;p&gt;Pellentesque habitant morbi tristique senectus.&lt;/p&gt; &lt;/li&gt; &lt;li data-orbit-slide="headline-2"&gt; &lt;h2&gt;Headline 2&lt;/h2&gt; &lt;h3&gt;Subheadline&lt;/h3&gt; &lt;p&gt;Pellentesque habitant morbi tristique senectus.&lt;/p&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance

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