{"id":18,"date":"2014-04-22T07:32:46","date_gmt":"2014-04-22T07:32:46","guid":{"rendered":"http:\/\/localhost:8080\/wordpress\/?page_id=12"},"modified":"2014-04-22T07:32:46","modified_gmt":"2014-04-22T07:32:46","slug":"documentation","status":"publish","type":"page","link":"https:\/\/xprojs.com\/xproslider\/documentation\/","title":{"rendered":"Documentation"},"content":{"rendered":"<br \/>\n<style>.entry-header {display: none;}<\/style>\n<div class=\"xp-left-menu\">\n<ul class=\"menu\">\n<li><a href=\"#getstart\">Getting Started<\/a>\n<ul class=\"submenu\">\n<li><a href=\"#install\">Installing Script<\/a><\/li>\n<li><a href=\"#include\">Include Slider Script<\/a><\/li>\n<li><a href=\"#create\">Create Slider Content<\/a><\/li>\n<li><a href=\"#initslider\">Initialize the Slider<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#slidertemplate\">Slider HTML Template<\/a>\n<ul class=\"submenu\">\n<li><a href=\"#imageitem\">Image Item<\/a><\/li>\n<li><a href=\"#videoitem\">Video Item<\/a><\/li>\n<li><a href=\"#lazyload\">Lazy Loaded Item<\/a><\/li>\n<li><a href=\"#animatedlayer\">Animated Layer<\/a><\/li>\n<li><a href=\"#kenburnseffect\">Ken Burns Effect<\/a><\/li>\n<li><a href=\"#html5videobg\">HTML 5 Video Background<\/a><\/li>\n<li><a href=\"#responsivesticky\">Responsive Sticky Layer<\/a><\/li>\n<li><a href=\"#thumbnail\">Thumbnail<\/a><\/li>\n<li><a href=\"#floatthumb\">Float Thumb<\/a><\/li>\n<li><a href=\"#iteminfo\">Item Info<\/a><\/li>\n<li><a href=\"#lightbox\">Built-in Lightbox<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#slidermodes\">Slider Modes<\/a><\/li>\n<li><a href=\"#slideroptions\">Slider Options<\/a><\/li>\n<li><a href=\"#stylesheet\">Stylesheet Reference<\/a><\/li>\n<li><a href=\"#api\">API Reference<\/a><\/li>\n<li><a href=\"#faq\">FAQ<\/a><\/li>\n<\/ul><\/div>\n<div class=\"xp-right-menu\">\n<div class=\"container\" style=\"width: 100%\">\n                                <\/p>\n<p style='font-size:12px;color:#888888'>Version 1.4 (last updated February 15th, 2016).<\/p>\n<p>XProSlider is professionally tailored slider control. It is easy to implement and offers limited and targeted set of features at its best with highest quality and performance. XProSlider is versatile, multimodes, can be implemented as a slider, a scroller or a gallery. It is control to enhance your website whether as website banner, picture or video gallery, news scroller or rss news scroller, etc.\n                <\/p>\n<p><\/p>\n<h4>Key features:<\/h4>\n<ul>\n<li>Slide any html content such image, text or video (support Youtube, Vimeo and HTML5 video).<\/li>\n<li>Fully responsive, adjust width or height accordingly.<\/li>\n<li>XProSlider not only a slider but also carousel\/scroller and a gallery. Can be configured to scroll content item continuously as running text or news bar.<\/li>\n<li>Auto Height mode to adjust height proportionally or fit content.<\/li>\n<li>Smart navigation, navigate to target slide instantly, doesn\u2019t scroll all the way through target slide.<\/li>\n<li>Touch\/swipe slide enable(on touch screen),  click &#038; drag (with mouse) &#038; keyboard support.<\/li>\n<li>Support vertical\/horizontal orientation.<\/li>\n<li>Support image, tab style or bullet style thumbnail (horizontal or vertical).<\/li>\n<li>Multiple transition effects: slide, fate, zoom, shrink etc.<\/li>\n<li>Layer animation support multiple effects with declarative syntax.<\/li>\n<li>Ken Burns effect, add Ken Burns effect with declarative syntax.<\/li>\n<li>Responsive Sticky Layer.<\/li>\n<li>HTML 5 video slide and background.<\/li>\n<li>Slide out animation.<\/li>\n<li>Ajax\/lazy loading, external content linking, RSS and more.<\/li>\n<li>Automatically switch slide orientation at specified width.<\/li>\n<li>Automatically swith thumbnail orientation at specified width.<\/li>\n<li>Automatically distribute items evently in news\/carousel mode.<\/li>\n<li>Slide in floating lightbox.<\/li>\n<li>Built-in lightbox to show content, image or video.<\/li>\n<li>Info Panel, display additional information for each slide.<\/li>\n<li>Automatic slide and manual slide. External control to slide is also supported.<\/li>\n<li>Loop content.<\/li>\n<li>Fit image in slider by width, height or auto detect.<\/li>\n<li>Set Image vertical alignment to top, center or bottom.<\/li>\n<li>Show progress during interval between slide.<\/li>\n<li>Dynamic API to add content at runtime.<\/li>\n<li>Compatible with all major browsers including mobile browser.<\/li>\n<li>Easy to implement, no complex template and scripting.<\/li>\n<li>25+ real world implementation templates.<\/li>\n<\/ul>\n<p><\/p>\n<h4>Browser compatibility:<\/h4>\n<p>All major browsers: IE8+, Safari, Chrome, Firefox, Opera, Mobile Chrome, Mobile Safari.<\/p>\n<p>Note that layer animation is not available in IE8. Ken Burns effect is not available in IE8 and IE9.<\/p>\n<p>\n                <a name=\"getstart\"><\/a><\/p>\n<h2>Getting Started<\/h2>\n<p>\n                <a name=\"install\"><\/a><\/p>\n<h4>Installing Scripts<\/h4>\n<p>XProSlider is javascript component, there is no special requirement in installation. Unzip the<br \/>\n                    slider package into your project folder. All the required scripts and stylesheets are in <strong><em>scripts\/<\/em><\/strong> folder<\/p>\n<p>\n                <a name=\"include\"><\/a><\/p>\n<h4>Include Slider Script and stylesheet in Page<\/h4>\n<div class=\"highlight\">\n<p>include jQuery script which is required by slider,<\/p>\n<pre><code class=\"html\"><span class=\"tag\">&lt;script <span class=\"attr\">src=<\/span><span class=\"val\">\"sliderfolder\/scripts\/jquery-1.9.1.min.js\"<\/span>><\/span><span class=\"tag\">&lt;\/script&gt;<\/span><\/code><\/pre>\n<p>include slider script,<\/p>\n<pre><code class=\"html\"><span class=\"tag\">&lt;script <span class=\"attr\">src=<\/span><span class=\"val\">\"sliderfolder\/scripts\/slider.js\"<\/span>><\/span><span class=\"tag\">&lt;\/script&gt;<\/span><\/code><\/pre>\n<\/p><\/div>\n<p>and the stylesheet<\/p>\n<div class=\"highlight\">\n<pre><code class=\"html\"><span class=\"tag\">&lt;link <span class=\"attr\">rel=<\/span><span class=\"val\">\"stylesheet\"<\/span> <span class=\"attr\">href=<\/span><span class=\"val\">\"sliderfolder\/scripts\/slider_base.css\"<\/span> \/><\/span><\/code><\/pre>\n<\/p><\/div>\n<p class=\"alert alert-info\">\n                    Note that <em>slider_base.css<\/em> is basic css. <strong>Don&#8217;t edit this file directly<\/strong>, create new css file and import <em>slider_base.css<\/em> using CSS <strong>@mport<\/strong> then override the rules just like css file found in <strong>templates\/<\/strong> folder.<br \/>\n                    You can also use CSS file template folder as reference.\n                <\/p>\n<p>\n                <a name=\"create\"><\/a><\/p>\n<h4>Create Slider Content<\/h4>\n<p>Slider content defined in the page are regular html elements with special css class marker. Below is the basic slider&#8217;s html template structure:<\/p>\n<div class=\"highlight\">\n<pre><code class=\"html\">&lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-container\"<\/span>&gt;\n    &lt;div <span class=\"attr\">id=<\/span><span class=\"attr\">\"scroller\"<\/span> <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider\"<\/span>&gt;\n        &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-content\"<\/span>&gt;\n            &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n                <span class=\"text\">content 1<\/span>\n            &lt;\/div>\n            &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n                <span class=\"text\">content 2<\/span>\n            &lt;\/div>\n            &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n                <span class=\"text\">content 3<\/span>\n            &lt;\/div>\n            &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n                <span class=\"text\">content 4<\/span>\n            &lt;\/div>\n        &lt;\/div>\n    &lt;\/div>    \n&lt;\/div><\/code><\/pre>\n<\/p><\/div>\n<p class=\"alert alert-info\">Notice the element with <strong>class=&#8221;xpro-slider&#8221;<\/strong> should have id<br \/>\n                    assigned to be used in later script initialization. In this example the id is <strong>scroller<\/strong><\/p>\n<p>\n                <a name=\"initslider\"><\/a><\/p>\n<h4>Initialize the Slider <\/h4>\n<p>Create slider object using the following syntax:<\/p>\n<div class=\"highlight\">\n<pre><code class=\"js\"><span class=\"key\">var<\/span> slider = <span class=\"key\">new<\/span> XPRO.Controls.Slider();\nslider.initSlider(<span class=\"str\">\"element id\"<\/span>, {options});\n<\/code><\/pre>\n<\/p><\/div>\n<p>The function <strong><em>initSlider<\/em><\/strong> takes 2 arguments: <\/p>\n<ul>\n<li>(string) element id, id of slider template element<\/li>\n<li>(object) slider options<\/li>\n<\/ul>\n<p>Put the initialization code in page load or jQuery <strong><em>ready<\/em><\/strong> event:<\/p>\n<div class=\"highlight\">\n<pre><code class=\"js\">jQuery(<span class=\"key\">document<\/span>).ready(\n    <span class=\"key\">function<\/span>() {\n        <span class=\"key\">var<\/span> slider = <span class=\"key\">new<\/span> XPRO.Controls.Slider();\n        slider.initSlider(<span class=\"str\">\"scroller\"<\/span>, {\n                <span class=\"str\">\"mode\"<\/span>              : <span class=\"str\">\"slide\"<\/span>,\n                <span class=\"str\">\"iniWidth\"<\/span>          : <span class=\"num\">700<\/span>,\n                <span class=\"str\">\"iniHeight\"<\/span>         : <span class=\"num\">350<\/span>,\n                <span class=\"str\">\"autoHeightMode\"<\/span>    : <span class=\"str\">\"maintainratio\"<\/span>,\n                <span class=\"str\">\"thumbnails\"<\/span>        : {<span class=\"str\">\"navigation\"<\/span>: <span class=\"key\">false<\/span>,\n                                       <span class=\"str\">\"thumb_type\"<\/span>: <span class=\"str\">\"bullet\"<\/span>}\n        });     \n\n    }\n);            \n<\/code><\/pre>\n<\/p><\/div>\n<p class=\"alert alert-info\">Notice the first argument is <strong>scroller<\/strong> which is the id of slider template element.<\/p>\n<p>\n                <a name=\"slidertemplate\"><\/a><\/p>\n<h2>Slider HTML Template<\/h2>\n<p><\/p>\n<p>XProSlider template is very simple and easy to setup, it doesn&#8217;t change along with slider mode\/configuration, all use the same template.<br \/>\n                    Below is the basic template structure:<\/p>\n<div class=\"highlight\">\n<pre><code class=\"html\">&lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-container\"<\/span>&gt;\n    &lt;div <span class=\"attr\">id=<\/span><span class=\"attr\">\"scroller\"<\/span> <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider\"<\/span>&gt;\n        &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-content\"<\/span>&gt;\n            &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n                <span class=\"text\">Slider item 1 content here...<\/span>\n            &lt;\/div>\n            &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n                <span class=\"text\">Slider item 2 content here...<\/span>\n            &lt;\/div>\n            &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n                <span class=\"text\">Slider item 3 content here...<\/span>\n            &lt;\/div>\n            &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n                <span class=\"text\">Slider item n content here...<\/span>\n            &lt;\/div>\n        &lt;\/div>\n    &lt;\/div>    \n&lt;\/div><\/code><\/pre>\n<\/div>\n<p>You just need to put slider content in item marked with class <strong><em>xpro-slider-item<\/em><\/strong>.<br \/>\n                    Content can be any html elements such as block, paragraph, image or video.\n                <\/p>\n<p>\n                <a name=\"imageitem\"><\/a><\/p>\n<h4>Image Item<\/h4>\n<p>Image item added using html <strong><em>&lt;img&gt;<\/em><\/strong> tag. For the image to be responsive, don&#8217;t specify dimension<br \/>\n                    (width or height, if you have to, use relative unit such as %)<\/p>\n<div class=\"highlight\">\n<pre><code class=\"html\">&lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n    &lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"sample.jpg\"<\/span> \/&gt;\n&lt;\/div><\/code><\/pre>\n<\/p><\/div>\n<p><\/p>\n<h5>Special CSS class for image.<\/h5>\n<p class=\"alert alert-info\">\n                    A special css class <strong>xpro-slider-image<\/strong> can be apply for image item.<br \/>\n                    Only images with this class are affected by slider&#8217;s <strong>imageFit<\/strong> and <strong>imageVAlign<\/strong> option otherwise, image is positioned as document flow.\n                <\/p>\n<div class=\"highlight\">\n<pre><code class=\"html\">&lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n    &lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"sample.jpg\"<\/span> <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-image\"<\/span> \/&gt;\n&lt;\/div><\/code><\/pre>\n<\/p><\/div>\n<p>\n                <a name=\"videoitem\"><\/a><\/p>\n<h4>Video Item<\/h4>\n<p>Video item is added using a <strong><em>&lt;div&gt;<\/em><\/strong> tag with following required attributes:<\/p>\n<ul>\n<li><em>class<\/em>=<strong>&#8220;xpro-video-item&#8221;<\/strong><\/li>\n<li><em>data-videourl<\/em>=<strong>&#8220;youtube full url, vimeo full url or &#8216;html5&#8242;&#8221;<\/strong><\/li>\n<li><em>data-display<\/em>=<strong>&#8220;lightbox&#8221;<\/strong>, optional, if not specified, open the video inline.<\/li>\n<li><em>data-title<\/em>=<strong>&#8220;some text&#8221;<\/strong>, optional, show video title at the bottom of item.<\/li>\n<\/ul>\n<div class=\"highlight\">\n<pre><code class=\"html\">&lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n    &lt;div <span class=\"attr\">style=<\/span><span class=\"val\">\"width:100%\"<\/span> <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-video-item\"<\/span> <span class=\"attr\">data-videourl=<\/span><span class=\"val\">\"http:\/\/www.youtube.com\/watch?v=Dsz4zNtHQ9k\"<\/span>&gt;\n        &lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/avatar.jpg\"<\/span> \/&gt;\n    &lt;\/div>\n&lt;\/div><\/code><\/pre>\n<\/p><\/div>\n<p>You can add image inside the element as video avatar.<\/p>\n<p>\n                <a name=\"html5videoitem\"><\/a><\/p>\n<h4>HTML 5 Video Item<\/h4>\n<p>For html 5 video, set <strong>&#8220;html5&#8221;<\/strong> to <em>data-videourl<\/em> property.<br \/>\n                    Video source property should be defined inside video item using special markup class <strong>xpro-video-prop<\/strong>.<\/p>\n<div class=\"highlight\">\n<pre><code class=\"html\">&lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n    &lt;div <span class=\"attr\">style=<\/span><span class=\"val\">\"width:100%\"<\/span> <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-video-item\"<\/span> <span class=\"attr\">data-videourl=<\/span><span class=\"val\">\"html5\"<\/span>&gt;\n        &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-video-prop\"<\/span> <span class=\"attr\">data-videourl=<\/span><span class=\"val\">\"images\/pedestrian.mp4\"<\/span> <span class=\"attr\">data-videotype=<\/span><span class=\"val\">\"video\/mp4\"<\/span>>&lt;\/div>\n        &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-video-prop\"<\/span> <span class=\"attr\">data-videourl=<\/span><span class=\"val\">\"images\/pedestrian.ogg\"<\/span> <span class=\"attr\">data-videotype=<\/span><span class=\"val\">\"video\/ogg\"<\/span>>&lt;\/div>\n        &lt;!-- Below you can add preview screen\/avatar or other text to be displayed when video inactive.--&gt;\n        &lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/avatar.jpg\"<\/span> \/&gt;\n    &lt;\/div>\n&lt;\/div><\/code><\/pre>\n<\/p><\/div>\n<p>\n                <a name=\"lazyload\"><\/a><\/p>\n<h4>Lazy Loaded Item<\/h4>\n<p>Lazy loading enable the slider to load image when it is about to slide. This are required attributes:<\/p>\n<ul>\n<li><em>class<\/em>=<strong>&#8220;xpro-lazy&#8221;<\/strong><\/li>\n<li><em>data-src<\/em>=<strong>&#8220;image url&#8221;<\/strong><\/li>\n<\/ul>\n<div class=\"highlight\">\n<pre><code class=\"html\">&lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n    &lt;img <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-lazy\"<\/span> <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/ajax-loader.gif\"<\/span> <span class=\"attr\">data-src=<\/span><span class=\"val\">\"images\/sample1.jpg\"<\/span> \/&gt;\n&lt;\/div><\/code><\/pre>\n<\/p><\/div>\n<p>The example above lazy loads an image. You can display a small loading icon\/animated as default image.<\/p>\n<p>As of <strong>version 1.1<\/strong>, another way to lazy load image is introduced by using special markup class <strong>xpro-image-placeholder<\/strong>:<\/p>\n<div class=\"highlight\">\n<pre><code class=\"html\">&lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n    &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-image-placeholder\"<\/span> <span class=\"attr\">data-src=<\/span><span class=\"val\">\"images\/colorful_jelly.jpg\"<\/span> <span class=\"attr\">data-class=<\/span><span class=\"val\">\"xpro-slider-image\"<\/span>>&lt;\/div>\n&lt;\/div><\/code><\/pre>\n<\/p><\/div>\n<p>\n                <a name=\"animatedlayer\"><\/a><\/p>\n<h4>Animated Layer<\/h4>\n<p>Add animation to slider with animated layer. You can add more than one layer to slider item.<br \/>\n                    Animated layer is added using <strong>&lt;div&gt;<\/strong> tag with the following attributes:<\/p>\n<ul>\n<li><em>class<\/em>=<strong>&#8220;xpro-item-layer&#8221;<\/strong><\/li>\n<li><em>data-effect<\/em>=<strong>&#8220;(transition function)&#8221;<\/strong>\n<p>Below are animation function currently supported:<\/p>\n<ul>\n<li>\n<p>As of 1.2, new universal <strong><em>animate()<\/em><\/strong> function is introduced with more declarative animation options:<\/p>\n<p><strong>animate<\/strong>({X:&#8217;50px&#8217;, Y:&#8217;0px&#8217;, flip:&#8221;, rotate:&#8221;, zoom:&#8221;, skew:&#8221;, opacity:&#8217;0.7&#8242;, delay:&#8217;0.8s&#8217;, duration:&#8217;0.6s&#8217;, easing:&#8217;ease-in-cubic&#8217;})<\/p>\n<p>All options are optional except <em>delay<\/em> and <em>duration<\/em>.<\/p>\n<ul>\n<li><strong>X<\/strong>, translate horizontally in X unit. Pixel (px) or percent (%) is supported.<\/li>\n<li><strong>Y<\/strong>, translate vertically in Y unit. Pixel (px) or percent (%) is supported.<\/li>\n<li><strong>flip<\/strong>, flip horizontal or vertical:\n<div><em>in-up<\/em>, <em>in-down<\/em>, <em>in-left<\/em>, <em>in-right<\/em><\/div>\n<div><em>out-up<\/em>, <em>out-down<\/em>, <em>out-left<\/em>, <em>out-right<\/em><\/div>\n<\/li>\n<li><strong>rotate<\/strong>, rotate left or right:\n<div><em>in-left<\/em>, <em>in-right<\/em><\/div>\n<div><em>out-left<\/em>, <em>out-right<\/em><\/div>\n<\/li>\n<li><strong>zoom<\/strong>, zoom the layer:\n<div><em>in<\/em>, <em>out<\/em><\/div>\n<\/li>\n<li><strong>skew<\/strong>, skew layer:\n<div><em>in-up<\/em>, <em>in-down<\/em>, <em>in-left<\/em>, <em>in-right<\/em><\/div>\n<div><em>out-up<\/em>, <em>out-down<\/em>, <em>out-left<\/em>, <em>out-right<\/em><\/div>\n<\/li>\n<li><strong>opacity<\/strong>, set opacity.<\/li>\n<li><strong>delay<\/strong>, set delay before animation start in format &#8216;0.5s&#8217; or &#8216;500ms&#8217;<\/li>\n<li><strong>duration<\/strong>, set animation duration in format &#8216;0.5s&#8217; or &#8216;500ms&#8217;<\/li>\n<li><strong>easing<\/strong>, set easing function.\n<p class=\"alert alert-info\">For list of supported easing function, check <a href=\"#easing\">Slider Modes.<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>This is still supported but <em>animate()<\/em> is recommended.<\/p>\n<p><strong>slide<\/strong>({X:&#8217;50px&#8217;, Y:&#8217;0px&#8217;, delay:&#8217;0.8s&#8217;, duration:&#8217;0.6s&#8217;, opacity:&#8217;0.7&#8242;, easing:&#8217;ease-in-cubic&#8217;})<\/p>\n<p>This moves the layer X coordinate offset &#8217;50px&#8217; and Y offset &#8216;0px&#8217; and target opacity 0.7 after &#8216;800ms&#8217;. The animation duration is &#8216;600ms&#8217;. The value of offset can be nagative.<\/p>\n<p>Other valid examples:<\/p>\n<p>\n                                    slide({X:&#8217;50px&#8217;, Y:&#8217;0px&#8217;, delay:&#8217;0.8s&#8217;, duration:&#8217;0.6s&#8217;})<br \/>\n                                    slide({X:&#8217;-150px&#8217;, delay:&#8217;0.8s&#8217;, duration:&#8217;0.6s&#8217;})<br \/>\n                                    slide({Y:&#8217;-50px&#8217;, delay:&#8217;0.8s&#8217;})\n                                <\/p>\n<\/li>\n<li>\n<p>This is still supported but <em>animate()<\/em> is recommended.<\/p>\n<p><strong>fadeIn<\/strong>({delay:&#8217;1s&#8217;, duration:&#8217;0.8s&#8217;})<\/p>\n<p>Fade in effect. This can be achieved with slide({X:&#8217;0px&#8217;, Y:&#8217;0px&#8217;, delay:&#8217;0.6s&#8217;, duration:&#8217;0.8s&#8217;}) function above.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li><em>data-effect-out<\/em>=<strong>&#8220;(transition function)&#8221;<\/strong><br \/>\n                        This specify animation that run before a slide is fade out or slide out.\n                    <\/li>\n<li><em>data-apply-on-width<\/em>=<strong>[width from]-[width to]<\/strong>\n<p>Examples:<\/p>\n<ul>\n<li><em>data-apply-on-width=&#8221;900&#8243;<\/em>: apply only if width >= 900<\/li>\n<li><em>data-apply-on-width=&#8221;500-700&#8243;<\/em>: apply only if width >= 500 and width <= 700<\/li>\n<\/ul>\n<p><\/p>\n<p>Animated layer in XProSlider are all responsive and scaled depends on screen. Unless it is necessary, you may not need to use this attribute.<\/p>\n<\/li>\n<\/ul>\n<div class=\"highlight\">\n<pre><code class=\"html\">\n    &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n        &lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/sample2.jpg\"<\/span> \/&gt;\n        &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-item-layer\"<\/span>\n             <span class=\"attr\">data-effect=<\/span><span class=\"val\">\"slide({X:'50px', Y:'40px', delay:'1s', duration:'0.8s'})\"<\/span>\n             <span class=\"attr\">data-apply-on-width=<\/span><span class=\"val\">\"500-700\"<\/span>\n             <span class=\"attr\">style=<\/span><span class=\"val\">\"top:0px;left:0px;opacity:0;background-color:rgba(255,255,255, 0.8);border:#ffffff 1px solid;\"<\/span>&gt;\n            &lt;h1 <span class=\"attr\">style=<\/span><span class=\"val\">\"color:#ff0011;padding:10px 20px;margin:0px;\"<\/span>&gt;<span class=\"text\">this is animated layer.<\/span>&lt;\/h1&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n<\/code><\/pre>\n<\/p><\/div>\n<p><\/p>\n<p>Animated layer with class <strong>xpro-item-layer<\/strong> can be nested.<\/p>\n<p><\/p>\n<h5>Responsive Animated Layer<\/h5>\n<p class=\"alert alert-info\">\n                    In addition to <strong>data-apply-on-width<\/strong> attribute for animated layer responsiveness, xproslider supports automatic scale on animated layer to make sure responsiveness.<br \/>\n                    Note that only <strong>positional<\/strong> and <strong>dimensional inline style<\/strong> attributes will be scaled. Scale depends on initial slider&#8217;s width and height (slider&#8217;s iniWidth &#038; iniHeight option).<\/p>\n<p>                    For non animated layer elements (elements inside slider item but not animated layer) and elements inside animated layer to scale automatically, use special class <strong>xpro-item-layer-responsive<\/strong>, otherwise the element will not be scaled.\n                <\/p>\n<div class=\"highlight\">\n<pre><code class=\"html\">\n    &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n        &lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/sample2.jpg\"<\/span> \/&gt;\n        &lt;h1 <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-item-layer-responsive\"<\/span> <span class=\"attr\">style=<\/span><span class=\"val\">\"color:#ff0000;padding:10px 20px;margin:10px;\"<\/span>&gt;<span class=\"text\">this is title.<\/span>&lt;\/h1&gt;\n        &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-item-layer\"<\/span>\n             <span class=\"attr\">data-effect=<\/span><span class=\"val\">\"slide({X:'50px', Y:'40px', delay:'1s', duration:'0.8s'})\"<\/span>\n             <span class=\"attr\">style=<\/span><span class=\"val\">\"top:0px;left:0px;opacity:0;background-color:rgba(255,255,255, 0.8);border:#ffffff 1px solid;\"<\/span>&gt;\n            &lt;h1 <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-item-layer-responsive\"<\/span> <span class=\"attr\">style=<\/span><span class=\"val\">\"color:#ff0011;padding:10px 20px;margin:0px;\"<\/span>&gt;<span class=\"text\">this is animated layer.<\/span>&lt;\/h1&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n<\/code><\/pre>\n<\/p><\/div>\n<p>\n                <a name=\"kenburnseffect\"><\/a><\/p>\n<h4>Ken Burns Effect<\/h4>\n<p>Ken Burns effect (pan and zoom effect) can be applied to image or an element.<br \/>\n                    There are 9 predefined Ken Burns effect you can add to image or element,<br \/>\n                    as simple as adding css class.<\/p>\n<ul>\n<li>xpro-kenburns-dir-topleft<\/li>\n<li>xpro-kenburns-dir-topright<\/li>\n<li>xpro-kenburns-dir-top<\/li>\n<li>xpro-kenburns-dir-bottomleft<\/li>\n<li>xpro-kenburns-dir-bottomright<\/li>\n<li>xpro-kenburns-dir-bottom<\/li>\n<li>xpro-kenburns-dir-left<\/li>\n<li>xpro-kenburns-dir-right<\/li>\n<li>xpro-kenburns-dir-random, slider will randomly play the effect.<\/li>\n<\/ul>\n<p>By default all this effect plays zoom out effect, for zoom in, add another special class to element <strong>xpro-kenburns-in<\/strong><\/p>\n<p>Example:<\/p>\n<div class=\"highlight\">\n<pre><code class=\"html\">\n    &lt;!--This specifies effect in top left direction and zoom out-->\n    &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n        &lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/sample2.jpg\"<\/span> <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-kenburns-dir-topleft\"<\/span> \/&gt;\n    &lt;\/div&gt;\n\n    &lt;!--This specifies effect in random direction and zoom in-->\n    &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n        &lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/sample2.jpg\"<\/span> <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-kenburns-dir-random xpro-kenburns-in\"<\/span> \/&gt;\n    &lt;\/div&gt;\n<\/code>\n<\/pre>\n<\/p><\/div>\n<p>This class can be applied to lazy loaded image.<\/p>\n<p><\/p>\n<h5>Manually specify Ken Burns Effect<\/h5>\n<p>In case you need to manually specify Ken Burns effect for image or element, set data-effect attribute in animated layer with kenBurns() function:<\/p>\n<div class=\"highlight\">\n<pre><code class=\"html\">\n    &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n        &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-item-layer\"<\/span>\n             <span class=\"attr\">data-effect=<\/span><span class=\"val\">\"kenBurns({X:'100px', Y:'50px', scale:'1.2', delay:'0.5s', duration:'6s'})\"<\/span>\n             <span class=\"attr\">style=<\/span><span class=\"val\">\"top:0px;left:0px;\"<\/span>&gt;\n            &lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/image.jpg\"<\/span> \/&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n<\/code>\n<\/pre>\n<\/p><\/div>\n<p>\n                <a name=\"html5videobg\"><\/a><\/p>\n<h4>HTML 5 Video Slide<\/h4>\n<p>Use HTML 5 video as slide background as alternative to image.<br \/>\n                    Just define html 5 video tag in side slider item. Slider will play\/stop automatically during slide.<\/p>\n<div class=\"highlight\">\n<pre><code class=\"html\">\n    &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n        &lt;video <span class=\"attr\">loop=<\/span><span class=\"val\">'loop'<\/span> <span class=\"attr\">poster=<\/span><span class=\"val\">\"images\/skateboard.jpg\"<\/span> <span class=\"attr\">style=<\/span><span class=\"val\">\"width: 100%; height: auto; visibility: visible;\"<\/span>>\n            &lt;source <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/skateboard.mp4\"<\/span> <span class=\"attr\">type=<\/span><span class=\"val\">\"video\/mp4\"<\/span>>\n            &lt;source <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/skateboard.ogg\"<\/span> <span class=\"attr\">type=<\/span><span class=\"val\">\"video\/ogg\"<\/span>>\n        &lt;\/video>\n        &lt;!--You can add other layers here including animated layer-->\n        ...\n    &lt;\/div&gt;\n<\/code>\n<\/pre>\n<\/p><\/div>\n<p>\n                <a name=\"responsivesticky\"><\/a><\/p>\n<h4>Responsive Sticky Layer<\/h4>\n<p>Sticky layer always visible in slider, sticked on top of slider. You can show text, icon or image as sticky item.<\/p>\n<div class=\"highlight\">\n<pre><code class=\"html\">\n    &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-sticky-item\"<\/span> <span class=\"attr\">style=<\/span><span class=\"val\">\"left:0px;right:0px;top:0px;\"<\/span> &gt;\n        &lt;div <span class=\"attr\">style=<\/span><span class=\"val\">\"background-color:rgba(0,0,0,0.5);margin:0px 40px;padding:10px 10px;\"<\/span>>\n            &lt;h3 <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-item-layer-responsive\"<\/span> <span class=\"attr\">style=<\/span><span class=\"val\">\"text-align:center;font-size:14px;\"<\/span>>HTML 5 Video Demo &lt;\/h3>\n        &lt;\/div>\n    &lt;\/div&gt;\n<\/code>\n<\/pre>\n<\/p><\/div>\n<p>\n                <a name=\"thumbnail\"><\/a><\/p>\n<h4>Thumbnail<\/h4>\n<p>If thumbnail is enabled, you can provide html thumbnail for each slide.<br \/>\n                    This is done by adding a <strong>&lt;div&gt;<\/strong> tag with required attribute:<\/p>\n<ul>\n<li><em>class<\/em>=<strong>&#8220;xpro-thumb-item&#8221;<\/strong><\/li>\n<\/ul>\n<div class=\"highlight\">\n<pre><code class=\"html\">\n    &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n        &lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/sample2.jpg\"<\/span> \/&gt;\n        &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-thumb-item\"<\/span>&gt;&lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/thumbs\/sample_thm1.jpg\"<\/span> \/&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n<\/code><\/pre>\n<\/p><\/div>\n<p class=\"alert alert-info\">Note: Defining thumbnail template doesn&#8217;t automatically enable the thumbnails,<br \/>\n                    you have to enable thumbnail in slider configuration.<\/p>\n<p>\n                <a name=\"floatthumb\"><\/a><\/p>\n<h4>Float Thumb<\/h4>\n<p>Float thumb is floating hint displayed when mouse hover over navigation or thumbnails.<\/p>\n<p>                <img src='https:\/\/xprojs.com\/xproslider\/wp-content\/themes\/xproslider\/images\/docs\/thumb.jpg' \/><img src='https:\/\/xprojs.com\/xproslider\/wp-content\/themes\/xproslider\/images\/docs\/thumb2.jpg' \/><\/p>\n<p>To enable this, create thumbnail markup using class <strong><em>xpro-thumb-item<\/em><\/strong> as described in previous section and enable <strong><em>floatThumb<\/em><\/strong> option in slider initialization.<\/p>\n<div class=\"highlight\">\n<pre><code class=\"js\">jQuery(<span class=\"key\">document<\/span>).ready(\n    <span class=\"key\">function<\/span>() {\n        <span class=\"key\">var<\/span> slider = <span class=\"key\">new<\/span> XPRO.Controls.Slider();\n        slider.initSlider(<span class=\"str\">\"scroller\"<\/span>, {\n                <span class=\"str\">\"mode\"<\/span>              : <span class=\"str\">\"slide\"<\/span>,\n                <span class=\"str\">\"iniWidth\"<\/span>          : <span class=\"num\">700<\/span>,\n                <span class=\"str\">\"iniHeight\"<\/span>         : <span class=\"num\">350<\/span>,\n                <span class=\"str\">\"autoHeightMode\"<\/span>    : <span class=\"str\">\"maintainratio\"<\/span>,\n                <span class=\"str\">\"thumbnails\"<\/span>        : {<span class=\"str\">\"navigation\"<\/span>: <span class=\"key\">false<\/span>,\n                                       <span class=\"str\">\"thumb_type\"<\/span>: <span class=\"str\">\"bullet\"<\/span>},\n                <span class=\"str\">\"floatThumb\"<\/span>        : <span class=\"key\">true<\/span>\n        });     \n\n    }\n);            \n<\/code><\/pre>\n<\/p><\/div>\n<p>\n                <a name=\"iteminfo\"><\/a><\/p>\n<h4>Item Info<\/h4>\n<p>Item info is extra information for each slider item. You can add extra information like title or short description to each slide.<br \/>\n                Item info is added by using a <strong>&lt;div&gt;<\/strong> tag with required attribute:<\/p>\n<ul>\n<li><em>class<\/em>=<strong>&#8220;xpro-slider-info&#8221;<\/strong><\/li>\n<\/ul>\n<div class=\"highlight\">\n<pre><code class=\"html\">&lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span>&gt;\n        &lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/sample2.jpg\"<\/span> \/&gt;\n\n        &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-info\"<\/span>&gt;\n            &lt;h3&gt;<span class=\"text\">Slide 7<\/span>&lt;\/h3&gt;\n            &lt;p&gt;<span class=\"text\">Some text ... Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span>&lt;\/p&gt;\n            &lt;p&gt;<span class=\"text\">Some text ... Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span>&lt;\/p&gt;\n            &lt;p&gt;&lt;a <span class=\"attr\">href=<\/span><span class=\"val\">\"http:\/\/www.xprojs.com\/slider\"<\/span>&gt;<span class=\"text\">Click here for more information.<\/span>&lt;\/a&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n\n    &lt;\/div&gt;\n<\/code><\/pre>\n<\/p><\/div>\n<p class=\"alert alert-info\">Note: Info item doesn&#8217;t automatically show in slider, you have to enable the info panel in slider configuration.<\/p>\n<p>\n                <a name=\"lightbox\"><\/a><\/p>\n<h4>Built-in Lightbox<\/h4>\n<p>Add link to open image, video or html page in lightbox. Attributes:<\/p>\n<ul>\n<li><strong>data-display<\/strong>, required, value &#8216;inline&#8217;.<\/li>\n<li><strong>href<\/strong>, required, html page url, image or youtube\/vimeo url.<\/li>\n<li><strong>data-display-type<\/strong>, depends on HREF:\n<ul>\n<li>If image, this attribute is ignored.<\/li>\n<li>If youtube\/vimeo, the value should be &#8216;video&#8217;.<\/li>\n<li>If html page, it is optional, if value is &#8216;iframe&#8217; it display page in iframe, otherwise it displays the page inline, .<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"highlight\">\n<pre><code class=\"html\">&lt;a <span class=\"attr\">href=<\/span><span class=\"val\">\"image.jpg\"<\/span> <span class=\"attr\">data-display=<\/span><span class=\"val\">\"lightbox\"<\/span>>&lt;\/a>\n&lt;a <span class=\"attr\">href=<\/span><span class=\"val\">\"youtube-url\"<\/span> <span class=\"attr\">data-display=<\/span><span class=\"val\">\"lightbox\"<\/span> <span class=\"attr\">data-display-type=<\/span><span class=\"val\">\"video\"<\/span>>&lt;\/a>\n&lt;a <span class=\"attr\">href=<\/span><span class=\"val\">\"somepage.htm\"<\/span> <span class=\"attr\">data-display=<\/span><span class=\"val\">\"lightbox\"<\/span> <span class=\"attr\">data-display-type=<\/span><span class=\"val\">\"iframe\"<\/span>>&lt;\/a>\n<\/code><\/pre>\n<\/p><\/div>\n<p>\n                <a name=\"slidermodes\"><\/a><\/p>\n<h2>Slider Modes<\/h2>\n<p><\/p>\n<p>Slider mode set the transition mode from one slide to another.<\/p>\n<div class=\"highlight\">\n<pre><code class=\"js\">jQuery(<span class=\"key\">document<\/span>).ready(\n    <span class=\"key\">function<\/span>() {\n        <span class=\"key\">var<\/span> slider = <span class=\"key\">new<\/span> XPRO.Controls.Slider();\n        slider.initSlider(<span class=\"str\">\"scroller\"<\/span>, {\n                <span class=\"str\" style=\"color:#ff0000;font-weight: bold\">\"mode\"<\/span>              : <span style=\"color:#ff0000;font-weight: bold\" class=\"str\">\"slide\"<\/span>,\n                <span class=\"str\">\"iniWidth\"<\/span>          : <span class=\"num\">700<\/span>,\n                <span class=\"str\">\"iniHeight\"<\/span>         : <span class=\"num\">350<\/span>,\n                <span class=\"str\">\"autoHeightMode\"<\/span>    : <span class=\"str\">\"maintainratio\"<\/span>,\n                <span class=\"str\">\"thumbnails\"<\/span>        : {<span class=\"str\">\"navigation\"<\/span>: <span class=\"key\">false<\/span>,\n                                       <span class=\"str\">\"thumb_type\"<\/span>: <span class=\"str\">\"bullet\"<\/span>}\n        });     \n\n    }\n);            \n<\/code><\/pre>\n<\/p><\/div>\n<p>There are 5 modes supported:<\/p>\n<h4>slide<\/h4>\n<p>Slide current item out while sliding next item in.<\/p>\n<h4>carousel<\/h4>\n<p>Slide current item out while sliding next item in with visible near by slides.<\/p>\n<h4>slideOut<\/h4>\n<p>Slide current item out<\/p>\n<h4>fade<\/h4>\n<p>Fade in next item.<\/p>\n<h4>custom<\/h4>\n<p>if this is selected, slide effect for each slider item <strong>must<\/strong> be provided. To set slide effect, set <strong>data-effect<\/strong> attribute to slider item<\/p>\n<div class=\"highlight\">\n<pre><code class=\"html\">\n    &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span> <span class=\"attr\">data-effect=<\/span><span class=\"val\">\"slideOut({dir:'up', easing:'ease-in-cubic'})\"<\/span> <span class=\"attr\">style=<\/span><span class=\"val\">\"\"<\/span> &gt;\n        &lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/sample1.jpg\"<\/span> \/&gt;\n        &lt;h1 <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-item-layer-responsive\"<\/span> <span class=\"attr\">style=<\/span><span class=\"val\">\"color:#ff0000;padding:10px 20px;margin:10px;\"<\/span>&gt;<span class=\"text\">this is title.<\/span>&lt;\/h1&gt;\n        ...\n    &lt;\/div&gt;\n    &lt;div <span class=\"attr\">class=<\/span><span class=\"val\">\"xpro-slider-item\"<\/span> <span class=\"attr\">data-effect=<\/span><span class=\"val\">\"shrinkOut({easing:'ease-out-cubic'})\"<\/span> <span class=\"attr\">style=<\/span><span class=\"val\">\"\"<\/span> &gt;\n        &lt;img <span class=\"attr\">src=<\/span><span class=\"val\">\"images\/sample2.jpg\"<\/span> \/&gt;\n        ...\n    &lt;\/div&gt;\n<\/code><\/pre>\n<\/p><\/div>\n<p>Here are list of effect functions currently supported:<\/p>\n<ul>\n<li>slideOut({dir:&#8217;up&#8217;, delay:&#8217;1s&#8217;, duration:&#8217;0.8s&#8217;, easing:&#8217;ease-in-cubic&#8217;})<\/li>\n<li>fadeOut({delay:&#8217;1s&#8217;, duration:&#8217;0.8s&#8217;, easing:&#8217;ease-in-cubic&#8217;})<\/li>\n<li>zoomOut({delay:&#8217;1s&#8217;, duration:&#8217;0.8s&#8217;, easing:&#8217;ease-in-cubic&#8217;})<\/li>\n<li>shrinkOut({delay:&#8217;1s&#8217;, duration:&#8217;0.8s&#8217;, easing:&#8217;ease-in-cubic&#8217;})<\/li>\n<\/ul>\n<p>The options are optional, for example <strong>data-effect=&#8217;zoomOut&#8217;<\/strong> will still work with default value.<\/p>\n<p>\n                <a name='easing'><\/a><\/p>\n<h5>List of supported easing function<\/h5>\n<ul>\n<li>ease<\/li>\n<li>ease-in<\/li>\n<li>ease-out<\/li>\n<li>ease-in-out<\/li>\n<li>linear<\/li>\n<li>ease-in-cubic<\/li>\n<li>ease-in-expo<\/li>\n<li>ease-in-circ<\/li>\n<li>ease-in-bounce<\/li>\n<li>ease-out-cubic<\/li>\n<li>ease-out-expo<\/li>\n<li>ease-out-circ<\/li>\n<li>ease-out-bounce<\/li>\n<li>ease-inout-cubic<\/li>\n<li>ease-inout-expo<\/li>\n<li>ease-inout-circ<\/li>\n<li>ease-inout-bounce<\/li>\n<\/ul>\n<p>\n                <a name=\"slideroptions\"><\/a><\/p>\n<h2>Slider Options<\/h2>\n<p><\/p>\n<table class=\"table\">\n<tr>\n<th width=\"20%;\">Name<\/th>\n<th>Desc<\/th>\n<\/tr>\n<tr>\n<td>iniWidth<\/td>\n<td>Set slider initial width in px.<\/p>\n<p class=\"alert alert-info\">Note: Although the slider is responsive and it alters the dimension automatically,<br \/>\n                                slider dimension (width\/height) should be set to maintain the dimension ratio or slider and all its item layer.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>iniHeight<\/td>\n<td>Set slider initial height in px.<\/p>\n<p class=\"alert alert-info\">Note: Although the slider is responsive and it alters the dimension automatically,<br \/>\n                                slider dimension (width\/height) should be set to maintain the dimension ratio or slider and all its item layer.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>minHeight<\/td>\n<td>Set slider minimum height in px. This option only available if <strong>autoHeightMode<\/strong> is set to <em>maintainratio<\/em>\n                        <\/td>\n<\/tr>\n<tr>\n<td>mode<\/td>\n<td>Set slider mode. Available modes:<\/p>\n<ul>\n<li><strong>slide<\/strong>, slide current item out while sliding next item in.<\/li>\n<li><strong>carousel<\/strong>, slide current item out while sliding next item in with visible near by slides.<\/li>\n<li><strong>slideOut<\/strong>, slide current item out.<\/li>\n<li><strong>fade<\/strong>, fade in next item.<\/li>\n<li><strong>custom<\/strong>, If this is selected, slide effect for each slider item <strong>must<\/strong> be provided.\n                                <\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>autoHeightMode<\/td>\n<td>Set auto height mode. Available options:<\/p>\n<ul>\n<li><strong>fitcontent<\/strong>, adjust slider height to fit content.<\/li>\n<li><strong>maintainratio<\/strong>, resize slider responsively by initial ratio (determine from width and height property)<\/li>\n<li><strong>fixed<\/strong>, fixed size.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>autoRun<\/td>\n<td>(true or false). Run slider automatically, default value is <strong>false<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td>interval<\/td>\n<td>(number). Number of time before next slide run, in milliseconds(ms).\n                        <\/td>\n<\/tr>\n<tr>\n<td>duration<\/td>\n<td>(string). Slide transition duration, in seconds or miliseconds for example 0.5s, 0.8s, 1.2s, 1000ms or 1200ms.\n                        <\/td>\n<\/tr>\n<tr>\n<td>dir<\/td>\n<td>(string). Slide direction in auto mode.<br \/>\n                            Available values are <strong>left<\/strong>, <strong>right<\/strong>, <strong>up<\/strong>, <strong>down<\/strong>\n                        <\/td>\n<\/tr>\n<tr>\n<td>stopOnHover<\/td>\n<td>(true or false). Stop auto run on mouse hover, default is <strong>true<\/strong>.\n                        <\/td>\n<\/tr>\n<tr>\n<td>enableTouch<\/td>\n<td>(true or false). Enable touch\/swipe to slide, default is <strong>true<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td>enableKey<\/td>\n<td>(true or false). Enable keyboard to slide (left and right arrow key), default is <strong>true<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td>enableDrag<\/td>\n<td>(true or false). Enable mouse click and drag to slide, default is <strong>true<\/strong>.\n                        <\/td>\n<\/tr>\n<tr>\n<td>enableNavigation<\/td>\n<td>\n                            (true or false). Enable prev\/next navigation button, default is <strong>true<\/strong>.\n                        <\/td>\n<\/tr>\n<tr>\n<td>floating<\/td>\n<td>\n                            (true or false). Show slider in lightbox mode, default is <strong>false<\/strong>.\n                        <\/td>\n<\/tr>\n<tr>\n<td>thumbnails<\/td>\n<td>\n                            (object). Show thumbnails with following configuration options:<\/p>\n<ul>\n<li><strong>orient<\/strong>, orientation, &#8220;V&#8221; for vertical, &#8220;H&#8221; for horizontal, default is &#8220;H&#8221;<\/li>\n<li><strong>navigation<\/strong>, enable navigation (prev\/next), default is <strong>true<\/strong>.<\/li>\n<li><strong>thumb_type<\/strong>, bullet or html<\/li>\n<li><strong>slideOnHover<\/strong>, true or false, slide when mouse hover the bullet or thumbnail.<\/li>\n<li><strong>location<\/strong>, possible value:\n<ul>\n<li>&#8216;top&#8217; or &#8216;bottom&#8217; for horizontal thumbnails<\/li>\n<li>&#8216;left&#8217; or &#8216;right&#8217; for vertical thumbnails<\/li>\n<li>or &#8216;element id&#8217; to render thumbnails outside slider, in an external placeholder<\/li>\n<\/ul>\n<\/li>\n<li><strong>sliderThumbSpaces<\/strong>, spaces between thumbnails.<\/li>\n<li><strong>switchThumbOrientOnWidth<\/strong>, switch thumbnails orientation on specified width.<br \/>\n                                    Use in gallery with vertical thumbnails. For example set the value to 600 will cause slider<br \/>\n                                    thumbnails switch to horizontal thumbnails if slider width is less than 600px.<\/li>\n<li><strong>floating<\/strong>, this property should be used with thumbnail orientation set to &#8216;V&#8217; only.<br \/>\n                                    If true, it doesn&#8217;t calculate the dimension of slider\/thumbnails. Use this if you need the<br \/>\n                                    thumbnails floating or fully controlled by CSS.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>floatThumb<\/td>\n<td>\n                            (boolean). Show\/hide floating thumb when mouse hover over slide navigation or bullet thumbnails.<br \/>\n                            You also need to specify thumbnail image in the slide using <em>xpro-thumb-item<\/em> class.\n                        <\/td>\n<\/tr>\n<tr>\n<td>newsPreferredWidth<\/td>\n<td>\n                            (integer). To be used in <strong>news<\/strong> mode only. This set initial preferred width for each item, slider<br \/>\n                            will calculate number of items visible in slider based on current slider width.\n                        <\/td>\n<\/tr>\n<tr>\n<td>infoPanel<\/td>\n<td>\n                            (string). ID of external element to display slider item extra information.\n                        <\/td>\n<\/tr>\n<tr>\n<td>switchOrientOnWidth<\/td>\n<td>\n                            (integer). Switch slide direction\/orientation on specified width.\n                        <\/td>\n<\/tr>\n<tr>\n<td>imageFit<\/td>\n<td>\n                            (integer). Specify how image in slider item rendered. Possible values:<\/p>\n<ul>\n<li><strong>1<\/strong>, render as is<\/li>\n<li><strong>2<\/strong>, auto fit width or height depends on image.<\/li>\n<li><strong>3<\/strong>, always fit width (default)<\/li>\n<li><strong>4<\/strong>, always fit height<\/li>\n<\/ul>\n<p class=\"alert alert-info\">This applies to image with special marker class <strong><em>xpro-slider-image<\/em><\/strong> only<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>imageVAlign<\/td>\n<td>\n                            (string). Specify image vertical alignment. <\/p>\n<ul>\n<li><strong>center<\/strong>, align center (default)<\/li>\n<li><strong>top<\/strong>, align top<\/li>\n<li><strong>bottom<\/strong>, align bottom<\/li>\n<\/ul>\n<p class=\"alert alert-info\">This applies to image with special marker class <strong><em>xpro-slider-image<\/em><\/strong> only<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>showPauseButton<\/td>\n<td>\n                            (boolean). Show pause indicator for a few seconds when mouse hover over slider. This property depends on <em>stopOnHover<\/em> property.\n                        <\/td>\n<\/tr>\n<tr>\n<td>showProgress<\/td>\n<td>\n                            (boolean). true to show progress bar between slide interval.\n                        <\/td>\n<\/tr>\n<tr>\n<td>onSlide<\/td>\n<td>\n                            (event function). Fired on item slide. Arguments:<\/p>\n<ul>\n<li>current content object<\/li>\n<li>previous content index<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>onItemClick<\/td>\n<td>\n                            (event function). Fired on item click.\n                        <\/td>\n<\/tr>\n<tr>\n<td>onRevalidate<\/td>\n<td>\n                            (event function). Fired when slider revalidate its state (during resize, etc).<br \/>\n                            Note that the event maybe fired multiple times, please be sure the functions called inside this event can be executed multiple times.\n                        <\/td>\n<\/tr>\n<tr>\n<td>onAdjustHeight<\/td>\n<td>\n                            (event function). Fired when slider adjust its height in &#8216;maintainratio&#8217; (autoHeightMode).<br \/>\n                            You can use this property to adjust the height of slider for example to set full screen height.\n                        <\/td>\n<\/tr>\n<\/table>\n<p>\n                <a name=\"stylesheet\"><\/a><\/p>\n<h2>Stylesheet Reference<\/h2>\n<p><\/p>\n<p>This section detail the css rule used in slider.<\/p>\n<table class=\"table\">\n<tr>\n<th width=\"20%\">Class Name<\/th>\n<th>Description<\/th>\n<\/tr>\n<tr>\n<td>xpro-slider-container, xpro-carousel, xpro-floating-slider<\/td>\n<td>Control the style for slider container. The <em>xpro-carousel<\/em> class is added if slider is in carousel mode and the <em>xpro-floating-slider<\/em> is added in floating mode. <\/td>\n<\/tr>\n<tr>\n<td>xpro-slider, xpro-vertical-slider<\/td>\n<td>Control the style for slider viewport, the <em>xpro-vertical-slider<\/em> is added if the slider slides vertically.<\/td>\n<\/tr>\n<tr>\n<td>xpro-slider-content<\/td>\n<td>Wrapper for slider content.<\/td>\n<\/tr>\n<tr>\n<td>xpro-slider-item<\/td>\n<td>Slider item style.<\/td>\n<\/tr>\n<tr>\n<td>xpro-item-layer<\/td>\n<td>Mark the element as animated layer style.<\/td>\n<\/tr>\n<tr>\n<td>xpro-slider-image<\/td>\n<td>Mark the image to enable image positioning, this is related to slider&#8217;s imageFit and imageVAlign options.<\/td>\n<\/tr>\n<tr>\n<td>xpro-item-layer-responsive<\/td>\n<td>Mark the element responsive item, any positional and dimensional inline style will be scaled.<\/td>\n<\/tr>\n<\/table>\n<p class=\"alert alert-info\">This are basic css classes use in XProSlider. For complete rules, please check base stylesheet located in <strong><em>scripts\/skins\/base\/slider.css<\/em><\/strong>.<br \/>\n                    Also note that all skins\/templates class should derive from this base stylesheet using css <em>@import<\/em>.<\/p>\n<p>\n                <a name=\"api\"><\/a><\/p>\n<h2>API Reference<\/h2>\n<p>Slider is created using class <strong>XPRO.Controls.Slider<\/strong> class.<\/p>\n<table class=\"table\">\n<tr>\n<th width=\"30%\">Method<\/th>\n<th>Description<\/th>\n<\/tr>\n<tr>\n<td>initSlider(&#8220;element id&#8221;, {options})<\/td>\n<td>Initialize slider. Arguments:<\/p>\n<ul>\n<li>(string) element id, id of slider template element<\/li>\n<li>(object) slider options. Check <a href=\"#slideroptions\">slider options<\/a> for reference.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>createSliderStruct({options})<\/td>\n<td>Another option to create slider. This function create slider on fly. Options:<\/p>\n<ul>\n<li>(array) <strong>elements<\/strong>, array of elements for slider item. Required if rssUrl is not specified.<\/li>\n<li>(string) <strong>rssUrl<\/strong>, rss url. Required if &#8216;elements&#8217; property is not specified.<\/li>\n<li>(string) <strong>rssProxyUrl<\/strong>, rss parser proxy. Required of rssUrl is specified<\/li>\n<li>(object) <strong>sliderOptions<\/strong>, slider initialization options. Check <a href=\"#slideroptions\">slider options<\/a> for reference<\/li>\n<li>(string) <strong>placeholder<\/strong>, placeholder where slider will be rendered.<\/li>\n<li>(function) <strong>itemHTML(html, idx, elm)<\/strong>. Fired when generating slider item. This function must return item&#8217;s html string.\n<ul>\n<li>html, preserved (not used).<\/li>\n<li>idx, item index.<\/li>\n<li>elm, html element object or javascritpt item returned from RSS parser.<\/li>\n<\/ul>\n<\/li>\n<li>(function) <strong>beforeHTML()<\/strong>, html rendered before slider. Fired before &#8216;itemHTML&#8217; event.<\/li>\n<li>(function) <strong>afterHTML()<\/strong>, html rendered after slider. Fired after &#8216;itemHTML&#8217; event.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>forward()<\/td>\n<td>Slide forward to next item<\/td>\n<\/tr>\n<tr>\n<td>backward()<\/td>\n<td>Slide backward to next item<\/td>\n<\/tr>\n<tr>\n<td>slideTo(idx)<\/td>\n<td>Slide to specified item<\/td>\n<\/tr>\n<tr>\n<td>addContentItem(html)<\/td>\n<td>Append new item to slider.<\/td>\n<\/tr>\n<tr>\n<td>deleteContentItem(idx)<\/td>\n<td>Delete specified item from slider.<\/td>\n<\/tr>\n<tr>\n<td>emptyContent()<\/td>\n<td>Delete all contents.<\/td>\n<\/tr>\n<tr>\n<td>getContentPanel()<\/td>\n<td>Get slider content panel (panel with class=&#8217;xpro-slider-content&#8217;) where all slides defined.<\/td>\n<\/tr>\n<tr>\n<td>resized()<\/td>\n<td>Call this whenever there is possible size change to the slider to revalidate the slider.<\/td>\n<\/tr>\n<tr>\n<td>showSlider()<\/td>\n<td>Show slider, call this in floating mode.<\/td>\n<\/tr>\n<tr>\n<td>stopSlider()<\/td>\n<td>Stop the slider.<\/td>\n<\/tr>\n<tr>\n<td>run()<\/td>\n<td>Run the slider.<\/td>\n<\/tr>\n<\/table>\n<p>\n                <a name=\"faq\"><\/a><\/p>\n<h2>FAQ<\/h2>\n<p>This section provide general and frequently asked questions and the answer.<\/p>\n<ol>\n<li><a href=\"#faq1\">What is XProSlider<\/a><\/li>\n<li><a href=\"#faq2\">There are many slider script out there, how are XProSlider different?<\/a><\/li>\n<li><a href=\"#faq3\">What are the requirement for XProSlider?<\/a><\/li>\n<li><a href=\"#faq4\">How about update is it available for free?<\/a><\/li>\n<li><a href=\"#faq5\">What kind of support you provide?<\/a><\/li>\n<\/ol>\n<p>\n                <a name=\"faq1\"><\/a><\/p>\n<h4>What is XProSlider<\/h4>\n<p>XProSlider is professionally tailored slider control.<br \/>\n                It is easy to implement and offers limited and targeted set of features at its best with highest quality and performance.<br \/>\n                XProSlider is versatile, responsive, multimodes, can be implemented as a slider, a scroller or a gallery.<br \/>\n                It is control to enhance your website whether as website banner, picture or video gallery, news scroller or rss news scroller, etc.\n                <\/p>\n<p>\n                <a name=\"faq2\"><\/a><\/p>\n<h4>There are many slider script out there, how are XProSlider different?<\/h4>\n<p>XProSlider is multipurpose and verastile slider component. It focus on functionality as well as<br \/>\n                usability. XProSlider not only implemented as banner as most slider do but also can be implemented<br \/>\n                as image gallery with options like lightbox, ajax, navigation. It can also be implemented as news slider<br \/>\n                or news bar, content can be added\/loaded at runtime. This features mostly not found in other slider component.<\/p>\n<p>\n                <a name=\"faq3\"><\/a><\/p>\n<h4>What are the requirement for XProSlider?<\/h4>\n<p>XProSlider only requires jQuery core script and it runs on all most popular browsers.<\/p>\n<p>\n                <a name=\"faq4\"><\/a><\/p>\n<h4>How about update is it available for free?<\/h4>\n<p>Yes, update is free whenever it is available.<\/p>\n<p>\n                <a name=\"faq5\"><\/a><\/p>\n<h4>What kind of support you provide?<\/h4>\n<p>We provide email support, just contact us whenever you have problem.<\/p>\n<\/p><\/div>\n<p><!--container-->\n        <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Getting Started Installing Script Include Slider Script Create Slider Content Initialize the Slider Slider HTML Template Image Item Video Item Lazy Loaded Item Animated Layer Ken Burns Effect HTML 5 Video Background Responsive Sticky Layer Thumbnail Float Thumb Item Info Built-in Lightbox Slider Modes Slider Options Stylesheet Reference API Reference FAQ Version 1.4 (last updated [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xprojs.com\/xproslider\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xprojs.com\/xproslider\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xprojs.com\/xproslider\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xprojs.com\/xproslider\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xprojs.com\/xproslider\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":0,"href":"https:\/\/xprojs.com\/xproslider\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"wp:attachment":[{"href":"https:\/\/xprojs.com\/xproslider\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}