{"version": "1.6","name": "Revolution Responsive jQuery Slider","subline": "The Documentation","username": "ThemePunch","created": "06/22/2012","website": "http://www.codecanyon.com/user/themepunch?ref=themepunch","update": "06/28/2012","update_today": true,"email": "info@themepunch.com","intro": "For support please checkout http://themepunch.ticksy.com !","sections": [{"title": "Install","id": "install","content": "<p>\tThis chapter will gives you general instructions on how to install the slider and setup the &nbsp;options. Later chapters will be more detailed if needed.</p>\n<p>\t&nbsp;</p>\n<h4>\n\t00 What files do I need to upload to my server?</h4>\n<p>\tPlease upload the rs-plugin folder to your server. In this folder you will find the following subfolders containing all of the items content:</p>\n<ul>\t<li>\t\tjs</li>\n\t<li>\t\tcss</li>\n\t<li>\t\tassets</li>\n</ul>\n<p>\tYou could use your own jQuery but we recommend loading it directly from the Google ressources (see later in this documentation).</p>\n<p>\tYou will find an <strong>example</strong> <strong>index.html and index-fullwidth.html</strong>&nbsp;in your downloaded zip.&nbsp;</p>\n<h4>\n\t01 Implement the jQuery</h4>\n<p>\tAdd the following lines to your HTML Head:&nbsp;</p>\n<pre class=\"js\">\n&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js&gt;</pre>\n<p>\t&nbsp;</p>\n<h3>\n\t&nbsp;</h3>\n<h4>\n\t02 Add Revolution js and css files to your HTML page</h4>\n<div>\n\t&nbsp;</div>\n<div>\n\tAlso in the &lt;HEAD&gt; section:</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<pre class=\"html\">\n&lt;!-- jQuery REVOLUTION Slider  --&gt;\n&lt;script type=&quot;text/javascript&quot; src=&quot;rs-plugin/js/jquery.themepunch.plugins.min.js&quot;&gt;&lt;/script&gt;\n&lt;script type=&quot;text/javascript&quot; src=&quot;rs-plugin/js/jquery.themepunch.revolution.min.js&quot;&gt;&lt;/script&gt;\n\n&lt;!-- REVOLUTION BANNER CSS SETTINGS --&gt;\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;rs-plugin/css/settings.css&quot; media=&quot;screen&quot; /&gt;\n</pre>\n\t<div>\n\t\t&nbsp;</div>\n</div>\n<div>\n\tThis contains the JS and CSS for the Slider itself &nbsp;and some helping modules .</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<h4>\n\t\t03 A Create the surrounding DIV for your Slider (Responsive, none Full Width)</h4>\n\t<div>\n\t\t&nbsp;</div>\n\t<div>\n\t\tPut it in the HTML:</div>\n\t<div>\n\t\t&nbsp;</div>\n\t<pre class=\"html\">\n&lt;div class=&quot;banner-container&quot;&gt;<span class=\"Apple-tab-span\"> </span>\n\n   &lt;div class=&quot;banner&quot;&gt;...&lt;/div&gt;\n\n&lt;/div&gt;\n</pre>\n\t<div>\n\t\t&nbsp;</div>\n\t<div>\n\t\t<h4>\n\t\t\t03 B Create the surrounding DIV for your Slider (Responsive, Full Width Slider)</h4>\n\t\t<div>\n\t\t\t&nbsp;</div>\n\t\t<div>\n\t\t\tPut it in the HTML:</div>\n\t\t<div>\n\t\t\t&nbsp;</div>\n\t\t<pre class=\"html\">\n&lt;div class=&quot;fullwidthbanner-container&quot;&gt;<span class=\"Apple-tab-span\"> </span>\n\n   &lt;div class=&quot;fullwidthbanner&quot;&gt;...&lt;/div&gt;\n\n&lt;/div&gt;\n\n</pre>\n\t\t<div>\n\t\t\t&nbsp;</div>\n\t\t<h4>\n\t\t\t&nbsp;</h4>\n\t</div>\n\t<div>\n\t\t<h4>\n\t\t\t04 Put an unordered list inside to hold the different slides as list elements</h4>\n\t\t<p>\t\t\t&nbsp;</p>\n\t\t<pre class=\"html\">\n&lt;ul&gt;\n&lt;!-- THE BOXSLIDE EFFECT EXAMPLES  WITH LINK ON THE MAIN SLIDE EXAMPLE --&gt;\n\n &lt;li data-transition=&quot;boxslide&quot; data-slotamount=&quot;7&quot; data-link=&quot;http://www.google.de&quot;&gt; \n   &lt;img src=&quot;images/slides/image1.jpg&quot;&gt;\n   &lt;div class=&quot;caption sft big_white&quot;  data-x=&quot;400&quot; data-y=&quot;100&quot; data-speed=&quot;700&quot; data-start=&quot;1700&quot; data-easing=&quot;easeOutBack&quot;&gt;KICKSTART YOUR WEBSITE&lt;/div&gt;\n   &lt;div class=&quot;caption sfb big_orange&quot;  data-x=&quot;400&quot; data-y=&quot;142&quot; data-speed=&quot;500&quot; data-start=&quot;1900&quot; data-easing=&quot;easeOutBack&quot;&gt;WITH SLIDER REVOLUTION!&lt;/div&gt;\n   &lt;div class=&quot;caption lfr medium_grey&quot;  data-x=&quot;510&quot; data-y=&quot;210&quot; data-speed=&quot;300&quot; data-start=&quot;2000&quot;&gt;UNLIMITED TRANSITIONS&lt;/div&gt;\n &lt;/li&gt;\n...\n&lt;/ul&gt;</pre>\n\t\t<div>\n\t\t\t&nbsp;</div>\n\t\t<h4>\n\t\t\t05 Call the jQuery Plugin to build the Slider</h4>\n\t\t<p>\t\t\t&nbsp;</p>\n\t\t<pre class=\"js\">\n&lt;script type=&quot;text/javascript&quot;&gt;\n      var tpj=jQuery;               // MAKE JQUERY PLUGIN CONFLICTFREE\n&nbsp;&nbsp; &nbsp;&nbsp; tpj.noConflict();\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp; tpj(document).ready(function() {\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;              if (tpj.fn.cssOriginal!=undefined)   // CHECK IF fn.css already extended\n             &nbsp;&nbsp; &nbsp;&nbsp; tpj.fn.css = tpj.fn.cssOriginal;\n\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; tpj(&#39;.banner&#39;).revolution(\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; {&nbsp;&nbsp; &nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; delay:9000,&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; startheight:490,&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; startwidth:890,\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; hideThumbs:200,\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; thumbWidth:100,&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; thumbHeight:50,\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; thumbAmount:5,\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; navigationType:&quot;both&quot;,&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; \n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; navigationArrows:&quot;nexttobullets&quot;,&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; navigationStyle:&quot;round&quot;,&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; touchenabled:&quot;on&quot;,&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; \n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; onHoverStop:&quot;on&quot;,&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; navOffsetHorizontal:0,\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; navOffsetVertical:20,\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; shadow:1,\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;fullWidth:&quot;off&quot;&nbsp;&nbsp; &nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });&nbsp;&nbsp; &nbsp;\n&lt;/script&gt;\n\n\n</pre>\n\t</div>\n</div>\n<p>\t&nbsp;</p>\n"},{"title": "Markup","id": "markup","content": "<p>\tThe items markup uses javascript/jQuery to transform a block of HTML markup into the slider, all customization is done trough the use of HTML5 data attributes and CSS. The markup is valid for HTML5 rules and the content will be fully indexed by search engines. The general structure of markup follows this schema:</p>\n<p>\t&nbsp;</p>\n<h4>\n\t01 Two surrounding DIVs are the basic holder for your Slider:</h4>\n<div>\n\tPut it in the HTML for Responsive but none FullWidth version:</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;div id=&quot;banner_container&quot;&gt;\n   &lt;div id=&quot;banner&quot; &gt;...&lt;/div&gt;\n&lt;/div&gt;\n</pre>\n<div>\n\t<div>\n\t\tPut it in the HTML for Responsive And FullWidth version:</div>\n\t<div>\n\t\t&nbsp;</div>\n\t<pre class=\"html\">\n&lt;div id=&quot;fullwidthbanner-container&quot;&gt;\n   &lt;div id=&quot;fullwidthbanner&quot; &gt;...&lt;/div&gt;\n&lt;/div&gt;\n\n</pre>\n\t<div>\n\t\t&nbsp;</div>\n</div>\n<div>\n\tThe outside container could be used by one of your divs in your page and is needed for the responsive part.<br>\n\tTo get more know about the fullwidth and/or responsive containers, see our style.css examples.</div>\n<div>\n\t&nbsp;</div>\n<h4>\n\t02 An unordered list inside holds the different slides as list elements</h4>\n<div>\n\t&nbsp;</div>\n<div>\n\t<pre class=\"html\">\n&lt;ul&gt;\n&lt;!-- THE BOXSLIDE EFFECT EXAMPLES  WITH LINK ON THE MAIN SLIDE EXAMPLE --&gt;\n\n &lt;li data-transition=&quot;boxslide&quot; data-slotamount=&quot;7&quot; data-link=&quot;http://www.google.de&quot;&gt; \n   &lt;img src=&quot;images/slides/image1.jpg&quot;&gt;\n   &lt;div class=&quot;caption sft big_white&quot;  data-x=&quot;400&quot; data-y=&quot;100&quot; data-speed=&quot;700&quot; data-start=&quot;1700&quot; data-easing=&quot;easeOutBack&quot;&gt;KICKSTART YOUR WEBSITE&lt;/div&gt;\n   &lt;div class=&quot;caption sfb big_orange&quot;  data-x=&quot;400&quot; data-y=&quot;142&quot; data-speed=&quot;500&quot; data-start=&quot;1900&quot; data-easing=&quot;easeOutBack&quot;&gt;WITH SLIDER REVOLUTION!&lt;/div&gt;\n   &lt;div class=&quot;caption lfr medium_grey&quot;  data-x=&quot;510&quot; data-y=&quot;210&quot; data-speed=&quot;300&quot; data-start=&quot;2000&quot;&gt;UNLIMITED TRANSITIONS&lt;/div&gt;\n &lt;/li&gt;\n...\n&lt;/ul&gt;</pre>\n</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tThe next chapter describes the inner of this list elements.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tThe more advanced users will have no problems in customizing the slider up to every detail and create their own sliders with using the CSS files.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tThe CSS file responsible for the layout of your slider is the settings.css. Find All Responsive Settings and Docu later in &quot;Responsive Captions&quot;.</div>\n"},{"title": "Layout","id": "layout","content": "<h4>\n\t01 The Default parameters of the Plugin</h4>\n<div>\n\t<ul>\t\t<li>\t\t\t<strong>delay</strong>&nbsp;The time one slide stays on the screen in Milliseconds (Default: 9000)</li>\n\t\t<li>\t\t\t<strong>startheight&nbsp;</strong>Basic Height of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 490)&nbsp;&nbsp; It should be similiar to the settings of the style sheet.&nbsp; If you use a fullwidth banner, ti will deinfe the max. Height of the banner by resizing of the browser. The banner wont ne heigher than this value.</li>\n\t\t<li>\t\t\t<strong>startwidth </strong>Basic Width of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 890) &nbsp; It should be similiar to the settings of the style sheet.&nbsp; If you use a fullwidth banner, ti will deinfe the max. Width of the banner by resizing of the browser.</li>\n\t\t<li>\t\t\t<strong>hideThumbs </strong>Time after that the Thumbs will be hidden(Default: 200),</li>\n\t\t<li>\t\t\t<strong>navigationType</strong>&nbsp; Display type of the navigation bar&nbsp;(Default:&quot;none&quot;)<br>\n\t\t\tOptions:<br>\n\t\t\tbullet<br>\n\t\t\tthumb&nbsp;&nbsp; ** In Fullwidth version thumbs wont be displayed &nbsp;if navigation offset set to shwop thumbs outside of the container ! Thumbs must be showen in the container!<br>\n\t\t\tnone<br>\n\t\t\tboth</li>\n\t\t<li>\t\t\t<strong>navigationArrows</strong>&nbsp;Display position of the Navigation Arrows (Default: &quot;nexttobullets&quot;)<br>\n\t\t\tOptions:<br>\n\t\t\tnexttobullets<br>\n\t\t\tverticalcentered&nbsp;&nbsp; ** By navigation Type Thumb arrows always centered or none visible<br>\n\t\t\tnone</li>\n\t\t<li>\t\t\t<strong>navigationStyle</strong>&nbsp;Look of the navigation bullets (Default: &quot;round&quot;)<br>\n\t\t\tOptions:<br>\n\t\t\tround<br>\n\t\t\tsquare<br>\n\t\t\tnavbar&nbsp;&nbsp; ** If you choose navbar, we recommend to choose Navigation Arrows to nexttobullets</li>\n\t\t<li>\t\t\t<strong>touchenabled</strong>&nbsp;Enable Swipe Function on touch devices&nbsp;(Default: &quot;on&quot;)<br>\n\t\t\tOptions:<br>\n\t\t\ton<br>\n\t\t\toff</li>\n\t\t<li>\t\t\t<strong>navOffsetHorizontal </strong>The Bar is centered but could be moved this pixel count left(e.g. -10) or right (Default:<strong>&nbsp;</strong>0)&nbsp; ** By resizing the banner, it will be always centered !!</li>\n\t\t<li>\t\t\t<strong>navOffsetVertical</strong>&nbsp;The Bar is bound to the bottom but could be moved this pixel count&nbsp;up (e. g. -20) or down (Default: 20)</li>\n\t\t<li>\t\t\t<strong>shadow</strong> The Shadow display underneath the banner<br>\n\t\t\tOptions:<br>\n\t\t\t0 No Shadow<br>\n\t\t\t1<br>\n\t\t\t2<br>\n\t\t\t3</li>\n\t\t<li>\t\t\t<strong>onHoverStop</strong> Stop the Timer when hovering the slider<br>\n\t\t\tOptions:<br>\n\t\t\ton<br>\n\t\t\toff</li>\n\t\t<li>\t\t\t<strong>thumbWidth</strong> the basic Width of one Thumbnail (only if thumb is selected. Default:100)</li>\n\t\t<li>\t\t\t<strong>thumbHeight</strong> the basic Height of one Thumbnail (only if thumb is selected Default 50)</li>\n\t\t<li>\t\t\t<strong>thumbAmount</strong> the amount of the Thumbs visible same time (only if thumb is selected)<br>\n\t\t\t** All Thumbs will be hidden in smallest Responsive Level, and in smaller level default size is reseted to 60x30px. Can be modificated in the settings.css file)</li>\n\t\t<li>\t\t\t<strong>fullWidth</strong> on/off It turns on the Horizontal Centering of Images in FullWidth version. In Case the Image is bigger then the container width, it fits the image with its height in the container and centers horizontally.</li>\n\t</ul>\n</div>\n<div>\n\t&nbsp;</div>\n<h4>\n\t02 Slider items</h4>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>&lt;li&gt;</strong> - Every list item represents a new banner/slider item.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tTransition effects and a possible slide link are defined here:</div>\n<ul>\t<li>\t\t<strong>data-transition </strong>The appearance transition of this slide<br>\n\t\tOptions: &nbsp;<br>\n\t\tboxslide<br>\n\t\tboxfade<br>\n\t\tslotzoom-horizontal<br>\n\t\tslotslide-horizontal<br>\n\t\tslotfade-horizontal<br>\n\t\tslotzoom-vertical<br>\n\t\tslotslide-vertical<br>\n\t\tslotfade-vertical<br>\n\t\tcurtain-1<br>\n\t\tcurtain-2<br>\n\t\tcurtain-3<br>\n\t\tslideleft<br>\n\t\tslideright<br>\n\t\tslideup<br>\n\t\tslidedown<br>\n\t\tfade</li>\n\t<li>\t\t<strong>data-slotamount</strong> The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.</li>\n\t<li>\t\t<strong>data-link</strong> A link on the whole slide pic</li>\n\t<li>\t\t<strong>data-delay</strong> A new Dealy value for the Slide. If no delay defined per slide, the dealy defined via Options will be used</li>\n\t<li>\t\t<strong>data-thumb</strong> An Alternative Source for thumbs. If not defined a copy of the background image will be used in resized form</li>\n</ul>\n<div>\n\t&nbsp;</div>\n<div>\n\tEach List item must include:</div>\n<ul>\t<li>\t\tan image &lt;img&gt; as Background Image / Main Image with Data of the thumb<br>\n\t\tOR</li>\n\t<li>\t\ta colored background image AND a coloredbg caption which is full width/height defined !!<br>\n\t\t<div>\n\t\t\t<pre class=\"html\">\n&lt;img src=&quot;images/slides/coloredbg.png&quot;&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;\n&lt;div class=&quot;caption coloredbg fade&quot; data-x=&quot;0&quot; data-y=&quot;0&quot; data-speed=&quot;10&quot; data-start=&quot;0&quot; style=&quot;background-color:#ff9118; width:100%;height:100%&quot;&gt;&lt;/div&gt;\n\n</pre>\n\t\t</div>\n\t\t<div>\n\t\t\t&nbsp;</div>\n\t</li>\n</ul>\n<p>\tEach List item can include:</p>\n<ul>\t<li>\t\tsome &lt;div&gt;s containing captions (class=&quot;caption&quot;), this could contain embedded video iframes also</li>\n</ul>\n<div>\n\t<pre class=\"html\">\n&lt;li data-transition=&quot;boxslide&quot; data-slotamount=&quot;7&quot; data-link=&quot;http://www.google.de&quot;&gt; \n   &lt;img src=&quot;images/slides/image1.jpg&quot;&gt;\n   &lt;div class=&quot;caption sft big_white&quot;  data-x=&quot;400&quot; data-y=&quot;100&quot; data-speed=&quot;700&quot; data-start=&quot;1700&quot; data-easing=&quot;easeOutBack&quot;&gt;KICKSTART YOUR WEBSITE&lt;/div&gt;\n   &lt;div class=&quot;caption sfb big_orange&quot;  data-x=&quot;400&quot; data-y=&quot;142&quot; data-speed=&quot;500&quot; data-start=&quot;1900&quot; data-easing=&quot;easeOutBack&quot;&gt;WITH SLIDER REVOLUTION!&lt;/div&gt;\n   &lt;div class=&quot;caption lfr medium_grey&quot;  data-x=&quot;510&quot; data-y=&quot;210&quot; data-speed=&quot;300&quot; data-start=&quot;2000&quot;&gt;UNLIMITED TRANSITIONS&lt;/div&gt;\n &lt;/li&gt;\n</pre>\n</div>\n<div>\n\t&nbsp;</div>\n<h4>\n\t03 Captions</h4>\n<div>\n\t&nbsp;</div>\n<div>\n\tCaptions are Containers which can be customized via CSS, classes for the start animation and some data options.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tThe CSS for the caption added in the settings.css file because it depends strongly on the responsive Sizing.&nbsp;</div>\n<div>\n\tThere are 4 Steps of Responsive Contents which are written later below under the Responsive Dependencies Caption.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tYou find an example in the settings.css of our item download.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tThe options are in detail:</div>\n<ul>\t<li>\t\tcolor <strong>class</strong> example big_white, big_orange, medium_grey (check the style.css of the example for details)</li>\n\t<li>\t\tanimation <strong>class</strong><br>\n\t\tOptions:<br>\n\t\tsft - Short from Top<br>\n\t\tsfb - Short from Bottom<br>\n\t\tsfr - Short from Right<br>\n\t\tsfl - Short from Left<br>\n\t\tlft - Long from Top<br>\n\t\tlfb - Long from Bottom<br>\n\t\tlfr - Long from Right<br>\n\t\tlfl - Long from Left<br>\n\t\tfade - fading</li>\n\t<li>\t\t<strong>data-x The </strong>horizontal position in the standard (via startwidth option defined) screen size (other screen sizes will be calculated)</li>\n\t<li>\t\t<strong>data-y&nbsp;</strong>vertical position in the standard (via startheight option defined) screen size (other screen sizes will be calculated)</li>\n\t<li>\t\t<strong>data-speed </strong>duration of the animation in milliseconds</li>\n\t<li>\t\t<strong>data-start after </strong>how many milliseconds should this caption start to show</li>\n\t<li>\t\t<strong>data-easing </strong>special easing effect of the animation<br>\n\t\tOptions:<br>\n\t\teaseOutBack<br>\n\t\teaseInQuad<br>\n\t\teaseOutQuad<br>\n\t\teaseInOutQuad<br>\n\t\teaseInCubic<br>\n\t\teaseOutCubic<br>\n\t\teaseInOutCubic<br>\n\t\teaseInQuart<br>\n\t\teaseOutQuart<br>\n\t\teaseInOutQuart<br>\n\t\teaseInQuint<br>\n\t\teaseOutQuint<br>\n\t\teaseInOutQuint<br>\n\t\teaseInSine<br>\n\t\teaseOutSine<br>\n\t\teaseInOutSine<br>\n\t\teaseInExpo<br>\n\t\teaseOutExpo<br>\n\t\teaseInOutExpo<br>\n\t\teaseInCirc<br>\n\t\teaseOutCirc<br>\n\t\teaseInOutCirc<br>\n\t\teaseInElastic<br>\n\t\teaseOutElastic<br>\n\t\teaseInOutElastic<br>\n\t\teaseInBack<br>\n\t\teaseOutBack<br>\n\t\teaseInOutBack<br>\n\t\teaseInBounce<br>\n\t\teaseOutBounce<br>\n\t\teaseInOutBounce<br>\n\t\t<br>\n\t\t<br>\n\t\t&nbsp;</li>\n</ul>\n<div>\n\t<img alt=\"\" src=\"http://www.themepunch.com/averis/wp-content/uploads/2012/06/revolution.jpg\"></div>\n<div>\n\t&nbsp;</div>\n<h4>\n\t<br>\n\t04 Videos</h4>\n<div>\n\t&nbsp;</div>\n<div>\n\tIn order to embed videos in the slider you can embed videos via iframe of your favorite video site that allows this kind of embedding. An example with Vimeo:</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<pre class=\"html\">\n&lt;li data-transition=&quot;slideup&quot; data-slotamount=&quot;20&quot;&gt; \n&lt;img src=&quot;images/slides/image20.jpg&quot;  &gt;\n                                &lt;div class=&quot;caption lfb boxshadow&quot; data-x=&quot;70&quot; data-y=&quot;120&quot; data-speed=&quot;900&quot; data-start=&quot;500&quot; data-easing=&quot;easeOutBack&quot;&gt;&lt;iframe src=&quot;http://player.vimeo.com/video/29298709?title=0&amp;amp;byline=0&amp;amp;portrait=0&quot; width=&quot;460&quot; height=&quot;259&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;\n\n                                &lt;div class=&quot;caption lfb medium_grey&quot;  data-x=&quot;550&quot; data-y=&quot;258&quot; data-speed=&quot;300&quot; data-start=&quot;1600&quot; data-easing=&quot;easeOutExpo&quot;&gt;to your Slides&lt;/div&gt;\n\n&lt;/li&gt;</pre>\n</div>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<h4>\n\t<br>\n\t05 Banner Timer</h4>\n<div>\n\t&nbsp;</div>\n<div>\n\tIn order to use a banner timer, you will need to add the markup within the banner or fullwidthbanner divs.</div>\n<div>\n\tThe markup should look like :</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&lt;div class=&quot;tp-bannertimer&quot;&gt;&lt;/div&gt;<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span></div>\n<div>\n\t&nbsp;</div>\n<div>\n\tTo remove this timer just simple remove the markup from the container, and that is it.</div>\n"},{"title": "Responsive Basic","id": "responsive_basic","content": "<p>\tResponsive means that the slider will adjust to every screen width.</p>\n<div>\n\tTo achieve that you have to set a bunch of mediaqueries that will adjust the whole slider when a certain window size is used, or you will need to use our fullwidth style version, to let the banner always resize itself.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tThe basic containers are build like this ( in none Fullwidth, but 4 Level Responsive Version):</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<pre class=\"css\">\n .bannercontainer {\n    padding:5px;\n    background-color:#fff;\n    width:890px;\n    position:relative;\n    margin-left:auto;\n    margin-right:auto;\n}\n\n.banner{\n    width:890px;    // MUST BE THE SAME AS IN THE OPTIONS <strong>startwidth</strong> \n    height:490px;    // MUST BE THE SAME AS IN THE OPTIONS <strong>startheight</strong>\n    position:relative;\n    overflow:hidden;\n}\n\n\n\n\n</pre>\n\t<div>\n\t\t&nbsp;</div>\n\t<div>\n\t\t&nbsp;</div>\n\t<div>\n\t\tThe media queries that build the screen dependend container sizes:</div>\n\t<div>\n\t\t&nbsp;</div>\n\t<pre class=\"css\">\n@media only screen and (min-width: 768px) and (max-width: 959px) {\n   .banner, .bannercontainer{  width:750px; height:412px;}\n    .bannershadow {width:750px;}\n}\n\n@media only screen and (min-width: 480px) and (max-width: 767px) {\n  .banner, .bannercontainer{width:470px; height:258px;}   \n  .bannershadow {width:470px;}\n}\n\n@media only screen and (min-width: 0px) and (max-width: 479px) {\n   .banner, .bannercontainer{width:300px;height:165px;}\n   .bannershadow {width:300px; margin-top:-5px;}\n}</pre>\n</div>\n<p>\t&nbsp;</p>\n"},{"title": "Fullwidth","id": "fullwidth","content": "<p>\tThis slider can go fullwidth too. We have added an <strong>index-fullwidth.html example</strong> for you in the zip.</p>\n<p>\tPlease note the basic change in the markup.</p>\n<p>\tThe surrounding containers are:</p>\n<pre class=\"html\">\n&lt;div class=&quot;fullwidthbanner-container&quot;&gt;<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>\n\n   &lt;div class=&quot;fullwidthbanner&quot;&gt;...&lt;/div&gt;\n\n&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\tThe CSS is not splitted with Media-Queries but has a basic 100% value for width:</p>\n<p>\t&nbsp;</p>\n<pre class=\"css\">\n.fullwidthbanner-container{\n   width:100% !important;<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>\n   position:relative;\n   padding:0;<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>\n   max-height:450px !important;  // Same value as in OPTIONS the <strong>startheight</strong> parameter\n   overflow:hidden;\n} \n</pre>\n<p>\t&nbsp;</p>\n"},{"title": "Licenses","id": "licenses","content": "<p>\tUsed Assets</p>\n<ul>\t<li>\t\tTemplate demo images licensed from <a href=\"http://us.fotolia.com\">Fotolia</a> for preview usage. Please do not attempt to rip the images from the preview!</li>\n\t<li>\t\t<a href=\"http://cortys.de/cssAnimate/\">cssAnimate Plugin</a> Great and Simple cssAnimate jQuery Plugin</li>\n\t<li>\t\tWaitForImages jQuery Plugin</li>\n\t<li>\t\t<a href=\"http://www.netcu.de/jquery-touchwipe-iphone-ipad-library\">Touch Wipe jQuery Plugin</a></li>\n</ul>\n<p>\t&nbsp;</p>\n"},{"title": "Support","id": "support","content": "<p>\tIf you face problems with the installation or customization of our product please do not hesitate to contact us via our support ticket system:</p>\n<p>\t<strong><a href=\"http://themepunch.ticksy.com\">http://themepunch.ticksy.com</a></strong></p>\n"}],"use_sub": false,"logo": "http://www.themepunch.com/codecanyon_wp/wp-content/uploads/2012/04/logo.png","favicon": "","customcss": "","easing": "easeOutQuart","easingduration": "913","bgimage": "http://www.themepunch.com/codecanyon_wp/wp-content/themes/config/images/website_bg_tile-21.gif","bgrepeat": "repeat","bgattachment": "scroll","bgcolor": "A8A7A7","textcolor": "363636","linkcolor": "830909","hrcolor1": "858484","hrcolor2": "CFCDCD","sidebarbgimage": "","sidebarbgrepeat": "repeat","sidebarbgcolor": "363636","sidebartextcolor": "A8A7A7","sidebarlinkcolor": "A8A7A7","sidebaractivecolor": "404040","sidebaractivetextcolor": "B50D0D","sidebarhrcolor1": "242424","sidebarhrcolor2": "575757","cufon": "","itemURL": "","sendJSON": "","sendZIP": "","sendPWD": ""}