snipt

Ctrl+h for KB shortcuts

JavaScript

orbit options

$('#featured').orbit({
     animation: 'fade',                  // fade, horizontal-slide, vertical-slide, horizontal-push
     animationSpeed: 800,                // how fast animtions are
     timer: true, 			 // true or false to have the timer
     advanceSpeed: 4000, 		 // if timer is enabled, time between transitions 
     pauseOnHover: false, 		 // if you hover pauses the slider
     startClockOnMouseOut: false, 	 // if clock should start on MouseOut
     startClockOnMouseOutAfter: 1000, 	 // how long after MouseOut should the timer start again
     directionalNav: true, 		 // manual advancing directional navs
     captions: true, 			 // do you want captions?
     captionAnimation: 'fade', 		 // fade, slideOpen, none
     captionAnimationSpeed: 800, 	 // if so how quickly should they animate in
     bullets: false,			 // true or false to activate the bullet navigation
     bulletThumbs: false,		 // thumbnails for the bullets
     bulletThumbLocation: '',		 // location from this file where thumbs will be
     afterSlideChange: function(){}, 	 // empty function 
     fluid: true                         // or set a aspect ratio for content slides (ex: '4x3') 
});
https://snipt.net/embed/3f431686a51441e4c9f3fe6eecfb11fb/
/raw/3f431686a51441e4c9f3fe6eecfb11fb/
3f431686a51441e4c9f3fe6eecfb11fb
js
JavaScript
18
2019-07-22T12:48:36
True
False
False
/api/public/snipt/31487/
orbit-options-1
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#featured&#39;</span><span class="p">).</span><span class="nx">orbit</span><span class="p">({</span> </span><span id="L-2"><a name="L-2"></a> <span class="nx">animation</span><span class="o">:</span> <span class="s1">&#39;fade&#39;</span><span class="p">,</span> <span class="c1">// fade, horizontal-slide, vertical-slide, horizontal-push</span> </span><span id="L-3"><a name="L-3"></a> <span class="nx">animationSpeed</span><span class="o">:</span> <span class="mi">800</span><span class="p">,</span> <span class="c1">// how fast animtions are</span> </span><span id="L-4"><a name="L-4"></a> <span class="nx">timer</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// true or false to have the timer</span> </span><span id="L-5"><a name="L-5"></a> <span class="nx">advanceSpeed</span><span class="o">:</span> <span class="mi">4000</span><span class="p">,</span> <span class="c1">// if timer is enabled, time between transitions </span> </span><span id="L-6"><a name="L-6"></a> <span class="nx">pauseOnHover</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// if you hover pauses the slider</span> </span><span id="L-7"><a name="L-7"></a> <span class="nx">startClockOnMouseOut</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// if clock should start on MouseOut</span> </span><span id="L-8"><a name="L-8"></a> <span class="nx">startClockOnMouseOutAfter</span><span class="o">:</span> <span class="mi">1000</span><span class="p">,</span> <span class="c1">// how long after MouseOut should the timer start again</span> </span><span id="L-9"><a name="L-9"></a> <span class="nx">directionalNav</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// manual advancing directional navs</span> </span><span id="L-10"><a name="L-10"></a> <span class="nx">captions</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// do you want captions?</span> </span><span id="L-11"><a name="L-11"></a> <span class="nx">captionAnimation</span><span class="o">:</span> <span class="s1">&#39;fade&#39;</span><span class="p">,</span> <span class="c1">// fade, slideOpen, none</span> </span><span id="L-12"><a name="L-12"></a> <span class="nx">captionAnimationSpeed</span><span class="o">:</span> <span class="mi">800</span><span class="p">,</span> <span class="c1">// if so how quickly should they animate in</span> </span><span id="L-13"><a name="L-13"></a> <span class="nx">bullets</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// true or false to activate the bullet navigation</span> </span><span id="L-14"><a name="L-14"></a> <span class="nx">bulletThumbs</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// thumbnails for the bullets</span> </span><span id="L-15"><a name="L-15"></a> <span class="nx">bulletThumbLocation</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="c1">// location from this file where thumbs will be</span> </span><span id="L-16"><a name="L-16"></a> <span class="nx">afterSlideChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){},</span> <span class="c1">// empty function </span> </span><span id="L-17"><a name="L-17"></a> <span class="nx">fluid</span><span class="o">:</span> <span class="kc">true</span> <span class="c1">// or set a aspect ratio for content slides (ex: &#39;4x3&#39;) </span> </span><span id="L-18"><a name="L-18"></a><span class="p">});</span> </span></pre></div> </td></tr></table>
orbit, zurb