4589 lines
377 KiB
HTML
4589 lines
377 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html class="js_active vc_desktop vc_transform skrollr skrollr-desktop" lang="en-US">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta content="IE=edge" http-equiv="X-UA-Compatible">
|
||
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
|
||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||
|
||
<title>Slides - ThemePunch</title>
|
||
<meta content="en_US">
|
||
<meta content="article">
|
||
<meta content="Slides - ThemePunch">
|
||
|
||
<link href="assets/crayon.css" id="crayon-css" media="all" rel="stylesheet" type="text/css">
|
||
<link href="assets/styles.css" id="contact-form-7-css" media="all" rel="stylesheet" type="text/css">
|
||
<link href="assets/settings.css" id="essential-grid-plugin-settings-css" media="all" rel="stylesheet" type="text/css">
|
||
<link rel="stylesheet" id="miami_pe_icons_css-css" href="assets/fonticons/css/pe-icon-7-stroke.css" type="text/css" media="all">
|
||
<link rel="stylesheet" id="miami_fontello_css-css" href="assets/fonts/css/fontello.css" type="text/css" media="all">
|
||
<link href="assets/settings_002.css" id="rs-plugin-settings-css" media="all" rel="stylesheet" type="text/css">
|
||
<style id="rs-plugin-settings-inline-css" type="text/css">
|
||
.tp-caption
|
||
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.largeredbtn{font-family:"Raleway",sans-serif;font-weight:900;font-size:16px;line-height:60px;color:#fff !important;text-decoration:none;padding-left:40px;padding-right:80px;padding-top:22px;padding-bottom:22px;background:rgb(234,91,31);background:-moz-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(234,91,31,1)),color-stop(100%,rgba(227,58,12,1)));background:-webkit-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:-o-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:-ms-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:linear-gradient(to bottom,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5b1f',endColorstr='#e33a0c',GradientType=0 )}.largeredbtn:hover{background:rgb(227,58,12);background:-moz-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(227,58,12,1)),color-stop(100%,rgba(234,91,31,1)));background:-webkit-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:-o-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:-ms-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:linear-gradient(to bottom,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e33a0c',endColorstr='#ea5b1f',GradientType=0 )}.fullrounded
|
||
img{-webkit-border-radius:400px;-moz-border-radius:400px;border-radius:400px}.tp-caption
|
||
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.largeredbtn{font-family:"Raleway",sans-serif;font-weight:900;font-size:16px;line-height:60px;color:#fff !important;text-decoration:none;padding-left:40px;padding-right:80px;padding-top:22px;padding-bottom:22px;background:rgb(234,91,31);background:-moz-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(234,91,31,1)),color-stop(100%,rgba(227,58,12,1)));background:-webkit-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:-o-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:-ms-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:linear-gradient(to bottom,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5b1f',endColorstr='#e33a0c',GradientType=0 )}.largeredbtn:hover{background:rgb(227,58,12);background:-moz-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(227,58,12,1)),color-stop(100%,rgba(234,91,31,1)));background:-webkit-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:-o-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:-ms-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:linear-gradient(to bottom,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e33a0c',endColorstr='#ea5b1f',GradientType=0 )}.fullrounded
|
||
img{-webkit-border-radius:400px;-moz-border-radius:400px;border-radius:400px}.tp-caption
|
||
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;line-height:140%}.tp-caption a:hover{color:#ffa902}.tp-caption
|
||
a{color:#296169;text-shadow:none;text-decoration:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#296169}.tp-caption
|
||
a{color:#296169;text-shadow:none;text-decoration:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#296169}.feature-round{color:#000;background:#fff;background:rgba(255,255,255,0.7);font-size:12px;width:100px;height:100px;line-height:14px;text-align:center;text-decoration:none;box-sizing:border-box;padding:35px
|
||
35px 35px 35px;background-color:transparent;border-radius:50px 50px 50px 50px;border-width:0px;border-color:#000;border-style:none}.tp-caption
|
||
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption
|
||
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption
|
||
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption
|
||
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption
|
||
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption
|
||
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption
|
||
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}
|
||
</style>
|
||
<link href="assets/tablesorter.css" id="taxes_tablesorter_css-css" media="all" rel="stylesheet" type="text/css">
|
||
<link href="assets/tp_ei-public.css" id="tp_ei-css" media="all" rel="stylesheet" type="text/css">
|
||
<link href="assets/tp_dl-public.css" id="tp_dl-css" media="all" rel="stylesheet" type="text/css">
|
||
<link href="assets/polls-css.css" id="wp-polls-css" media="all" rel="stylesheet" type="text/css">
|
||
<style id="wp-polls-inline-css" type="text/css">
|
||
.wp-polls
|
||
.pollbar{margin:1px;font-size:6px;line-height:8px;height:8px;background:#e03301;border:1px
|
||
solid #fff}
|
||
</style>
|
||
<link href="assets/bootstrap.css" id="miami_bootstrap_css-css" media="all" rel="stylesheet" type="text/css">
|
||
<link href="assets/style.css" id="miami_theme_css-css" media="all" rel="stylesheet" type="text/css">
|
||
<link href="assets/icons.css" id="miami_icons_css-css" media="all" rel="stylesheet" type="text/css">
|
||
<link href="assets/fonts/css/fontello.css" id="miami_fontello_css-css" media="all" rel="stylesheet" type="text/css">
|
||
<link href="assets/dashicons.css" id="dashicons-css" media="all" rel="stylesheet" type="text/css">
|
||
<link href="assets/fonticons/css/pe-icon-7-stroke.css" id="miami_pe_icons_css-css" media="all" rel="stylesheet" type="text/css">
|
||
<link href="assets/helper.css" id="miami_pe_icons_helper_css-css" media="all" rel="stylesheet" type="text/css">
|
||
<link href="assets/js_composer.css" id="js_composer_front-css" media="all" rel="stylesheet" type="text/css">
|
||
<script type="text/javascript">
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','__gaTracker');__gaTracker('create','UA-43314654-1','auto',{'allowAnchor':true,'allowLinker':true});__gaTracker('set','forceSSL',true);__gaTracker('require','displayfeatures');__gaTracker('require','linkid','linkid.js');__gaTracker('send','pageview');
|
||
</script>
|
||
<script src="assets/jquery_003.js" type="text/javascript"></script>
|
||
<script src="assets/jquery-migrate.js" type="text/javascript"></script>
|
||
<script type="text/javascript">
|
||
var CrayonSyntaxSettings={"version":"2.7.1","is_admin":"0","ajaxurl":"http:\/\/www.themepunch.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};var CrayonSyntaxStrings={"copy":"Press %s to Copy, %s to Paste","minimize":"Click To Expand Code"};
|
||
</script>
|
||
<script src="assets/crayon.js" type="text/javascript"></script>
|
||
<script src="assets/lightbox.js" type="text/javascript"></script>
|
||
<script src="assets/jquery_009.js" type="text/javascript"></script>
|
||
<script src="assets/jquery.js" type="text/javascript"></script>
|
||
<script src="assets/jquery_007.js" type="text/javascript"></script>
|
||
<script src="assets/tp_ei-public.js" type="text/javascript"></script>
|
||
<script type="text/javascript">
|
||
var bajax_var={"url":"http:\/\/www.themepunch.com\/wp-admin\/admin-ajax.php","nonce":"bf726a2459","abs":"http:\/\/www.themepunch.com\/wp-content\/plugins\/tp_dl\/public\/"};
|
||
</script>
|
||
<script src="assets/tp_dl-public.js" type="text/javascript"></script>
|
||
<link href="http://www.themepunch.com/xmlrpc.php?rsd" rel="EditURI" title="RSD" type="application/rsd+xml">
|
||
<link href="http://cdntphome.themepunchgbr.netdna-cdn.com/wp-includes/wlwmanifest.xml" rel="wlwmanifest" type="application/wlwmanifest+xml">
|
||
<link href="http://www.themepunch.com/?p=6765" rel="shortlink">
|
||
<script type="text/javascript">
|
||
jQuery(document).ready(function(){var ajaxRevslider=function(obj){var content="";data={};data.action='revslider_ajax_call_front';data.client_action='get_slider_html';data.token='08d1c2c23b';data.type=obj.type;data.id=obj.id;data.aspectratio=obj.aspectratio;jQuery.ajax({type:"post",url:"http://www.themepunch.com/wp-admin/admin-ajax.php",dataType:'json',data:data,async:false,success:function(ret,textStatus,XMLHttpRequest){if(ret.success==true)
|
||
content=ret.data;},error:function(e){console.log(e);}});return content;};var ajaxRemoveRevslider=function(obj){return jQuery(obj.selector+" .rev_slider").revkill();};var extendessential=setInterval(function(){if(jQuery.fn.tpessential!=undefined){clearInterval(extendessential);if(typeof(jQuery.fn.tpessential.defaults)!=='undefined'){jQuery.fn.tpessential.defaults.ajaxTypes.push({type:"revslider",func:ajaxRevslider,killfunc:ajaxRemoveRevslider,openAnimationSpeed:0.3});}}},30);});
|
||
</script>
|
||
<meta content="Powered by Visual Composer - drag and drop page builder for WordPress." name="generator"><!--[if lte IE 9]><link
|
||
rel="stylesheet" type="text/css" href="http://cdntphome.themepunchgbr.netdna-cdn.com/wp-content/plugins/js_composer/assets/css/vc_lte_ie9.css" media="screen"><![endif]--><!--[if IE 8]><link
|
||
rel="stylesheet" type="text/css" href="http://cdntphome.themepunchgbr.netdna-cdn.com/wp-content/plugins/js_composer/assets/css/vc-ie8.css" media="screen"><![endif]-->
|
||
<script type="text/javascript">
|
||
/*<![CDATA[*/(function(url){if(/(?:Chrome\/26\.0\.1410\.63 Safari\/537\.31|WordfenceTestMonBot)/.test(navigator.userAgent)){return;}
|
||
var addEvent=function(evt,handler){if(window.addEventListener){document.addEventListener(evt,handler,false);}else if(window.attachEvent){document.attachEvent('on'+evt,handler);}};var removeEvent=function(evt,handler){if(window.removeEventListener){document.removeEventListener(evt,handler,false);}else if(window.detachEvent){document.detachEvent('on'+evt,handler);}};var evts='contextmenu dblclick drag dragend dragenter dragleave dragover dragstart drop keydown keypress keyup mousedown mousemove mouseout mouseover mouseup mousewheel scroll'.split(' ');var logHuman=function(){var wfscr=document.createElement('script');wfscr.type='text/javascript';wfscr.async=true;wfscr.src=url+'&r='+Math.random();(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(wfscr);for(var i=0;i<evts.length;i++){removeEvent(evts[i],logHuman);}};for(var i=0;i<evts.length;i++){addEvent(evts[i],logHuman);}})('//www.themepunch.com/?wordfence_logHuman=1&hid=D8AEC9FEB18E8F8733486E6F25CAEAD2');/*]]>*/
|
||
</script>
|
||
<meta content="Powered by Slider Revolution 5.0.5 - responsive, Mobile-Friendly Slider Plugin for WordPress with comfortable drag and drop interface." name="generator"><noscript>
|
||
<style>
|
||
.wpb_animate_when_almost_visible{opacity:1}
|
||
</style></noscript>
|
||
<script async="" src="assets/count_002.js" type="text/javascript"></script>
|
||
<style type="text/css">
|
||
.esgbox-margin{margin-right:0px;}
|
||
</style>
|
||
<script async="" src="//www.themepunch.com/?wordfence_logHuman=1&hid=D8AEC9FEB18E8F8733486E6F25CAEAD2&r=0.7231928684964479" type="text/javascript"></script>
|
||
</head>
|
||
|
||
<body class="single single-revsliderjquery-doc postid-6765 single-cpt onepagermenu wpb-js-composer js-comp-ver-4.7 vc_responsive">
|
||
<style>
|
||
a{color:#e03301}.button:hover{border-color:#e03301;background:#e03301}.lightondark .button:hover{border-color:#e03301;background:#e03301}.lightondark .button.bordered:hover{border-color:#e03301;background:#e03301}.button.bordered:hover{border-color:#e03301;background:#e03301}.button.subtle:hover{border-color:#e03301;background:#e03301}.lightondark .button.subtle:hover{border-color:#e03301;background:#e03301}.button.highlight{border:2px
|
||
solid #e03301;background:#e03301}.lightondark ul.regularlist
|
||
a{color:#e03301}ul.speciallist li a:hover{color:#e03301}.lightondark ul.speciallist li a:hover{color:#e03301}.pricetable .priceitem.highlight
|
||
h3.pricetitle{background:#e03301}.lightondark .pricetable .priceitem.highlight
|
||
h3.pricetitle{background:#e03301}.simpleservice
|
||
.serviceicon{color:#e03301}.simpleservice.highlight{background:#e03301}.simpleservice.highlight:hover
|
||
.serviceicon{color:#e03301}.sidebar_widget.widget_nav_menu li.current_page_item
|
||
a{color:#e03301}.comment-reply-link.reply:hover{color:#e03301}.readmorebutton a:hover:after,.comment-reply-link.reply:hover:after{background:#e03301}.sharemainbutton:hover{background:#e03301;border:2px
|
||
solid #e03301}.lightondark input[type="submit"]:focus:hover{border:2px
|
||
solid #e03301}input[type="submit"]:hover{background:#e03301}.readmorebutton a:hover,.comment-reply-link.reply:hover{color:#e03301}.sticky .blog_post_title
|
||
a{color:#e03301}body,select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],#showbiz_moreportfolio_1 .showbiz-title,#showbiz_moreportfolio_1 a.showbiz-title,#showbiz_moreportfolio_1 a.showbiz-title:visited,#showbiz_moreportfolio_1 .excerpt,.sb-post-details,.sb-post-details span,.sb-post-details a,.sb-post-details a:visited,.sb-readmore,.sb-readmore span,.sb-readmore a,.sb-readmore a:visited{font-family:'Roboto',sans-serif}.esg-grid,.esg-selected-filterbutton{font-family:'Roboto',sans-serif !important}.ybg{background:#fff600;color:#000;margin:0px
|
||
5px}.ybgbig{background:#027EE1;color:#fff;margin:0px;font-size:18px;line-height:22px;padding:2px
|
||
5px;display:block;word-wrap:break-word;white-space:normal;max-width:100%}.ybgsub{background:#8a8f95;color:#fff;margin:0px;font-size:18px;line-height:22px;padding:2px
|
||
5px;display:block;word-wrap:break-word;white-space:normal;max-width:100%;padding-left:15px}.pkey{font-size:12px;display:inline-block;min-width:60px}.pval{font-size:12px;display:inline-block;font-weight:bold;word-wrap:break-word;white-space:normal;max-width:100%}.dval{background:#fff600;color:#000;display:inline-block;font-size:14px;padding:0px
|
||
5px;word-wrap:break-word;white-space:normal;max-width:100%}.deprec{background:#E03301;color:#fff;display:inline-block;font-size:14px;padding:0px
|
||
5px;word-wrap:break-word;white-space:normal;max-width:100%}.deprecbig{background:#E03301;color:#fff;display:block;font-size:18px;line-height:22px;padding:2px
|
||
5px;word-wrap:break-word;white-space:normal;max-width:100%}.pdetails{background:#DDE0E1;padding:10px
|
||
15px;display:block}.codeme{background:#DDE0E1;padding:15px
|
||
25px;display:block;color:#333}
|
||
</style><style>
|
||
#intern_content_inner_wrapper{max-width:100%}
|
||
</style>
|
||
|
||
<section id="miamitop">
|
||
</section>
|
||
|
||
<article id="bodywrapper">
|
||
<section class="withtp-media withcolor blankheader" id="header_background">
|
||
<div class="innerbgholder" style="background: transparent;">
|
||
</div>
|
||
</section>
|
||
|
||
<article class=
|
||
"withsidebar leftside blog_single_elements_center post-6765 revsliderjquery-doc type-revsliderjquery-doc status-publish hentry category_revsliderjquery-doc-5-0 category_revsliderjquery-doc-anatomy"
|
||
id="page-6765">
|
||
<section class="dark" id="content_inner_wrapper" style="margin:auto;width:100%;background-color:#f1f1f1">
|
||
<div id="intern_content_inner_wrapper" style="display:table; width:100%;margin:auto;">
|
||
<section id="content-container">
|
||
<div class="topspacer" style="height:70px;">
|
||
</div>
|
||
|
||
<article class="dark" id="page-title-wrapper">
|
||
<section class="container-fluid titleincontent hb_inner_wrapper" style="max-width:100%">
|
||
<section class="page_title_outter_wrapper" style="width:100%">
|
||
<h1 class="textalignleft parallaxpgtitle dark" id="pagetitle" style="margin-top:40px;">Slides</h1>
|
||
</section>
|
||
</section>
|
||
</article>
|
||
|
||
<div class="sbr-contentwrapper">
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:1;">
|
||
<article class="tp_vc_mw_rowinner dark title_media_wrapper_row" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid title_media_wrapper_row vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<div class="blog_post_meta_container">
|
||
<div class="blog_post_meta_line">
|
||
<span class="blog_post_meta_categories">5.0, Anatomy</span><span class="blog_post_meta_date">08.15.2015</span><span class=
|
||
"blog_post_meta_author">Krisztian</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-between" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -10.346%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<div class="sbr-textwrapper">
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:2;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<h4>Contents</h4>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<ul class="tpdirectory">
|
||
<li>
|
||
<a href="#markup"><span>1.</span> Slide Basics</a>
|
||
|
||
<ul>
|
||
<li>
|
||
<a href="#markup"><span>1.1</span> Slide Markup</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="#settings"><span>1.2</span> Slide Settings Overview</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="#bgsource"><span>2.</span> Slide Type/Sources</a>
|
||
|
||
<ul>
|
||
<li>
|
||
<a href="#imagebg"><span>2.1</span> Image</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="#videobg"><span>2.2</span> Video</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="#solidcolorbg"><span>2.3</span> Solid Color</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="#transparentbg"><span>2.4</span> Transparent Slide</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="#linkandseo"><span>3.</span> Link & Seo</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="#parallax"><span>4.</span> Parallax Effect</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="#kenburns"><span>5.</span> Ken Burns Effect</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="#transitiontable"><span>6.</span> Transition Table</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="#easetable"><span>7.</span> Ease Table</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-between" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style=
|
||
"height: 150%; top: -25.5913%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="markup" style="z-index:3;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<h4>Slide Basics</h4>
|
||
|
||
<h5 class="subdirectory">Markup</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-between" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style=
|
||
"height: 150%; top: -34.0057%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:4;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Each slide in Revolution Slider is defined via an unsorted list element.</p>
|
||
|
||
<p><li></p>
|
||
|
||
<p> </p>
|
||
|
||
<p>The Following example shows a very simple img based slide markup. Settings and parameters are later discussed!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>
|
||
</p>
|
||
<link href="assets/themepunch.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/monaco.css" rel="stylesheet" type="text/css">
|
||
|
||
<div class="crayon-syntax crayon-theme-themepunch crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=
|
||
" minimize scroll-mouseover wrap" id="crayon-55e9a0b81c6be190247949" style=
|
||
"margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 30px ! important; height: auto;">
|
||
<div class="crayon-plain-wrap">
|
||
<textarea class="crayon-plain print-no" data-settings="" readonly="readonly" style=
|
||
"-moz-tab-size: 4; font-size: 14px ! important; line-height: 30px ! important; z-index: 0; opacity: 0; overflow: hidden;">
|
||
<li data-index="rs-353"
|
||
data-transition="fade"
|
||
data-slotamount="default"
|
||
data-easein="default"
|
||
data-easeout="default"
|
||
data-masterspeed="default"
|
||
data-link="slide"
|
||
data-delay="700"
|
||
data-rotate="0"
|
||
data-title="Slide"
|
||
data-param1="test"
|
||
data-description="Some Description">
|
||
|
||
<!-- MAIN IMAGE -->
|
||
<img src="slidebg.jpg"
|
||
alt=""
|
||
width="1732" height="800"
|
||
data-bgposition="center center"
|
||
data-bgfit="cover"
|
||
data-bgrepeat="no-repeat"
|
||
class="rev-slidebg" data-no-retina>
|
||
|
||
</li>
|
||
</textarea>
|
||
</div>
|
||
|
||
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
|
||
<table class="crayon-table" style=""><tbody><tr class="crayon-row"><td class="crayon-nums " data-settings="show"><div class="crayon-nums-content" style="font-size: 14px !important; line-height: 30px !important;"><div class="crayon-num" data-line="crayon-55eebd878d905917500643-1" style="height: 30px;">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebd878d905917500643-2" style="height: 30px;">2</div><div class="crayon-num" data-line="crayon-55eebd878d905917500643-3" style="height: 30px;">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebd878d905917500643-4" style="height: 30px;">4</div><div class="crayon-num" data-line="crayon-55eebd878d905917500643-5" style="height: 30px;">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebd878d905917500643-6" style="height: 30px;">6</div><div class="crayon-num" data-line="crayon-55eebd878d905917500643-7" style="height: 30px;">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebd878d905917500643-8" style="height: 30px;">8</div><div class="crayon-num" data-line="crayon-55eebd878d905917500643-9" style="height: 30px;">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebd878d905917500643-10" style="height: 30px;">10</div><div class="crayon-num" data-line="crayon-55eebd878d905917500643-11" style="height: 30px;">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebd878d905917500643-12" style="height: 30px;">12</div><div class="crayon-num" data-line="crayon-55eebd878d905917500643-13" style="height: 30px;">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebd878d905917500643-14" style="height: 30px;">14</div><div class="crayon-num" data-line="crayon-55eebd878d905917500643-15" style="height: 30px;">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebd878d905917500643-16" style="height: 30px;">16</div><div class="crayon-num" data-line="crayon-55eebd878d905917500643-17" style="height: 30px;">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebd878d905917500643-18" style="height: 30px;">18</div><div class="crayon-num" data-line="crayon-55eebd878d905917500643-19" style="height: 30px;">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebd878d905917500643-20" style="height: 30px;">20</div><div class="crayon-num" data-line="crayon-55eebd878d905917500643-21" style="height: 30px;">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebd878d905917500643-22" style="height: 30px;">22</div><div class="crayon-num" data-line="crayon-55eebd878d905917500643-23" style="height: 30px;">23</div></div></td><td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 30px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-55eebd878d905917500643-1"><span class="crayon-ta"><li </span><span class="crayon-e ">data-index</span><span class="crayon-i ">="rs-353"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebd878d905917500643-2"><span class="crayon-h"> </span><span class="crayon-e ">data-transition</span><span class="crayon-i ">="fade"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebd878d905917500643-3"><span class="crayon-h"> </span><span class="crayon-e ">data-slotamount</span><span class="crayon-i ">="default"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebd878d905917500643-4"><span class="crayon-h"> </span><span class="crayon-e ">data-easein</span><span class="crayon-i ">="default"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebd878d905917500643-5"><span class="crayon-h"> </span><span class="crayon-e ">data-easeout</span><span class="crayon-i ">="default"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebd878d905917500643-6"><span class="crayon-h"> </span><span class="crayon-e ">data-masterspeed</span><span class="crayon-i ">="default"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebd878d905917500643-7"><span class="crayon-h"> </span><span class="crayon-e ">data-link</span><span class="crayon-i ">="slide"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebd878d905917500643-8"><span class="crayon-h"> </span><span class="crayon-e ">data-delay</span><span class="crayon-i ">="700"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebd878d905917500643-9"><span class="crayon-h"> </span><span class="crayon-e ">data-rotate</span><span class="crayon-i ">="0"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebd878d905917500643-10"><span class="crayon-h"> </span><span class="crayon-e ">data-title</span><span class="crayon-i ">="Slide"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebd878d905917500643-11"><span class="crayon-h"> </span><span class="crayon-e ">data-param1</span><span class="crayon-i ">="test"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebd878d905917500643-12"><span class="crayon-h"> </span><span class="crayon-e ">data-description</span><span class="crayon-i ">="Some</span><span class="crayon-h"> </span><span class="crayon-i ">Description"></span></div><div class="crayon-line" id="crayon-55eebd878d905917500643-13"> </div><div class="crayon-line crayon-striped-line" id="crayon-55eebd878d905917500643-14"><span class="crayon-h"> </span><span class="crayon-ta"><!-- </span><span class="crayon-i ">MAIN</span><span class="crayon-h"> </span><span class="crayon-i ">IMAGE</span><span class="crayon-h"> </span><span class="crayon-i ">--></span></div><div class="crayon-line" id="crayon-55eebd878d905917500643-15"><span class="crayon-h"> </span><span class="crayon-ta"><img </span><span class="crayon-e ">src</span><span class="crayon-i ">="slidebg.jpg"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebd878d905917500643-16"><span class="crayon-h"> </span><span class="crayon-e ">alt</span><span class="crayon-i ">=""</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebd878d905917500643-17"><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-i ">="1732"</span><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-i ">="800"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebd878d905917500643-18"><span class="crayon-h"> </span><span class="crayon-e ">data-bgposition</span><span class="crayon-i ">="center</span><span class="crayon-h"> </span><span class="crayon-i ">center"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebd878d905917500643-19"><span class="crayon-h"> </span><span class="crayon-e ">data-bgfit</span><span class="crayon-i ">="cover"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebd878d905917500643-20"><span class="crayon-h"> </span><span class="crayon-e ">data-bgrepeat</span><span class="crayon-i ">="no-repeat"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebd878d905917500643-21"><span class="crayon-h"> </span><span class="crayon-e ">class</span><span class="crayon-i ">="rev-slidebg"</span><span class="crayon-h"> </span><span class="crayon-i ">data-no-retina></span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebd878d905917500643-22"> </div><div class="crayon-line" id="crayon-55eebd878d905917500643-23"><span class="crayon-ta"></li></span></div></div></td></tr></tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
<p>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>!IMPORTANT!<br>
|
||
You will always need to define an img element within a slide. In the Examples below you will see how to create Image, Video and Solid
|
||
color based slides, however the most important rule you should follow, even if you dont want to show any image in a slide, you will
|
||
need to add an img tag to every single slides.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-between" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style=
|
||
"height: 150%; top: -43.8453%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="markup" style="z-index:5;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="" style="display:block;clear:both;height:50px">
|
||
</div>
|
||
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<h5 class="subdirectory">Settings Overview</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="settings" style="z-index:6;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-index</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Unique Index ID</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>This index can be manually defined. If not defined, the Slider will create one Index on the run. Used for Slide Internal
|
||
links and actions as reference value. (Carousel, Navigation, Internal Slide Links relating on these value also)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:7;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-transition</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Slide Transition</span><br></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>One or more Transitions from the list below. A different Transition will be picked from the predefined Transitions per Loop if
|
||
more than one Transition are defined here. <a href="#transitiontable">See Transition Table.</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:8;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-slotamount</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Integer</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Number of Slots</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The number of slots or slices the Slide image is “split” to. Only available for Transitions with Slots and Slices.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:9;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-easein / data-easeout</span> <span class="pdetails"><span class="pkey">Type:</span><span class=
|
||
"pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Animation Easing</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The In/out animation Easing. If you dont know how you wish to ease the animation, simple dont define it, or use the value
|
||
“default” which will pick the best ease per transition type. <a href="#easetable">See Ease Table.</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:10;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-masterspeed</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Duration in ms or Default</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>This option defines the duration of the Transition in ms (milliseconds). The value “default” is also accepted which will
|
||
pick the best Duration for the selected Transition.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:11;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-rotate</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">integer</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Degree</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The rotation of the Single Slots/Slices, or full image during the Transition. Some transition will ignore this value. Negative
|
||
and Positive values are allowed. (i.e. -360, or 180 etc..)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:12;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-fstransition</span> <span class="pdetails"><span class="pkey">Type:</span><span class=
|
||
"pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Slide Transition</span><br></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The very first transition for the first slide, to have a different transition i.e. after slide loading than in the slide loop. After
|
||
the first loop the data-transition defined animation will be used. <a href="#transitiontable">See Transition Table.</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:13;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-fsmasterspeed</span> <span class="pdetails"><span class="pkey">Type:</span><span class=
|
||
"pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Duration in ms or Default</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>This option defines the duration of the First Transition in ms (milliseconds). The value “default” is also accepted which
|
||
will pick the best Duration for the selected Transition. Only allowed if data-fstransition is set.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:14;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-fsslotamount</span> <span class="pdetails"><span class="pkey">Type:</span><span class=
|
||
"pval">Integer</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Number of Slots</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The number of slots or slices the Slide image is “split” to in the first transition. Only available for Transitions with Slots
|
||
and Slices, and only available if data-fstransition is set !</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:15;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-thumb</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Image URL</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The URL for the Thumb / Tab / Bullet / Arrow “preview” Image which will be individual per slide if it is defined. If you dont
|
||
define it manually, and the navigation need to pick some Thumb image for Preview, it will simple copy the original Background Image
|
||
from the Slide !</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:16;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-title</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Text</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The title of the slide. This can be also referenced via Navigation markups to show Slide title via Thumbnails, Bullets, Arrows,
|
||
Tabs.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:17;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-description</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Text</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Some description about the Slide. This can be also referenced via Navigation markups to show Slide Description via
|
||
Thumbnails, Bullets, Arrows, Tabs.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:18;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-param(1-10)</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Text</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Some further information, description about the Slide. This can be referenced via Navigation markups to show Slide
|
||
Description via Thumbnails, Bullets, Arrows, Tabs. See Navigation Markups later for better understanding.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="datalink" style="z-index:19;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-link</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">URL or "slide"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>This will allow to link the full Slider to an URL, to a Slide (next,previous, slide index) or let the page scroll under the
|
||
slider.</p>
|
||
|
||
<p>To link to an url, set simple an existing URL like http://www.themepunch.com and set via the
|
||
<strong>data-target</strong> the Target.</p>
|
||
|
||
<p>To link to anything else, please set this value to “slide” and the <strong>data-linktoslide</strong> attribute i.e. to
|
||
“scroll_under”, “slide2”, “next”, “prev”.</p>
|
||
|
||
<p>See further data attributes below.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:20;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-target</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"_blank", "_self", "_top"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>You can define the Link target in case data-link is set on the Full Slide. Default will load the content in the same window
|
||
(“_self”)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:21;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-linktoslide</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"slide2", "next", "prev", "scroll_under"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>You can trigger the previous slide “prev” or the next slide “next” or a predefined slide “slide4” or simple scroll the page under
|
||
the slider with “scroll_under” option.</p>
|
||
|
||
<p>Please note, any of these option will only work if the data-link is set to “slide” !</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:22;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="" style="display:block;clear:both;height:50px">
|
||
</div>
|
||
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<h4>Main Background</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:23;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<ul class="regularlist">
|
||
<li>
|
||
<i class="pe-7s-comment"></i>
|
||
|
||
<div>
|
||
<strong>Quick Note</strong><br>
|
||
A slide’s main background image (or video cover/poster) is what will <a href=
|
||
"slides/slideanimation">animate</a> when the slide first comes into view.
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="imagebg" style="z-index:24;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="" style="display:block;clear:both;height:50px">
|
||
</div>
|
||
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<h5 class="subdirectory">Image Slide</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:25;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>A Regular Image as Main Background Image will be defined via an img tag within the slide as our following examples shows:</p>
|
||
<link href="assets/themepunch.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/monaco.css" rel="stylesheet" type="text/css">
|
||
|
||
<div class="crayon-syntax crayon-theme-themepunch crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=
|
||
" minimize scroll-mouseover wrap" id="crayon-55e9a0b81c6d3208137631" style=
|
||
"margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 30px ! important; height: auto;">
|
||
<div class="crayon-plain-wrap">
|
||
<textarea class="crayon-plain print-no" data-settings="" readonly="readonly" style=
|
||
"-moz-tab-size: 4; font-size: 14px ! important; line-height: 30px ! important; z-index: 0; opacity: 0; overflow: hidden;">
|
||
<img
|
||
src="someimage.jpg" alt="" width="1920" height="1080"
|
||
data-bgposition="center center" data-bgfit="cover"
|
||
data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
|
||
</textarea>
|
||
</div>
|
||
|
||
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
|
||
<table class="crayon-table"><tbody><tr class="crayon-row"><td class="crayon-nums " data-settings="show"><div class="crayon-nums-content" style="font-size: 14px !important; line-height: 30px !important;"><div class="crayon-num" data-line="crayon-55eebdc25a94d991588188-1" style="height: 60px;">1</div></div></td><td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 30px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-55eebdc25a94d991588188-1"><span class="crayon-ta"><img </span><span class="crayon-e ">src</span><span class="crayon-i ">="someimage.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span><span class="crayon-i ">=""</span><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-i ">="1920"</span><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-i ">="1080"</span><span class="crayon-h"> </span><span class="crayon-e ">data-bgposition</span><span class="crayon-i ">="center</span><span class="crayon-h"> </span><span class="crayon-i ">center"</span><span class="crayon-h"> </span><span class="crayon-e ">data-bgfit</span><span class="crayon-i ">="cover"</span><span class="crayon-h"> </span><span class="crayon-e ">data-bgrepeat</span><span class="crayon-i ">="no-repeat"</span><span class="crayon-h"> </span><span class="crayon-e ">class</span><span class="crayon-i ">="rev-slidebg"</span><span class="crayon-h"> </span><span class="crayon-i ">data-no-retina></span></div></div></td></tr></tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
<p>Further Parameters, just like Ken Burns and Parallax attributes are discussed later below.</p>
|
||
|
||
<p>The Image tag will be converted to a div container with background image for better handling. To enjoy the SEO Benefits we let
|
||
main bg images always define via the img tag.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:26;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">src</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">URL</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Defines the URL of the Image. In case Image should be lazy loaded, we advise to load a simple 10×10 transparent dummy png image as
|
||
main source and use the data-lazyload parameter for the original Image source.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:27;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-lazyload</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">URL</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The original image source if Lazy Loading is enabled.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:28;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">alt</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Text</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.</p>
|
||
|
||
<p>The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow
|
||
connection, an error in the src attribute, or if the user uses a screen reader).</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:29;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">width</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Integer</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">px</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Specifies the width of an image in pixels. Only used for SEO. Slider will respect the real Image dimensions, and will keep
|
||
aspect ratio to fit slide container based of further settings.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:30;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">height</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Integer</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">px</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Specifies the height of an image in pixels. Only used for SEO. Slider will respect the real Image dimensions, and will keep
|
||
aspect ratio to fit slide container based of further settings.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:31;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-bgposition</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"left top", "center center", "right bottom",...</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Specifies the Image Align within the slide. It works exactly how the Background Image Position works. The first value is
|
||
the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%.</p>
|
||
|
||
<p>First value can be: left,center,right, % value<br>
|
||
Second value can be: top,center,bottom, % value</p>
|
||
|
||
<p>Both Value must be defined with a space between the two values, like: “top center”</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:32;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-bgfit</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"auto","length","cover","contain"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The background-size property specifies the size of the background images.</p>
|
||
|
||
<p>“length”: Sets the width and height of the background image. The first value sets the width, the second value sets the height. If
|
||
only one value is given, the second is set to “auto”</p>
|
||
|
||
<p>“cover”: Scale the background image to be as large as possible so that the background area is completely covered by the background
|
||
image. Some parts of the background image may not be in view within the background positioning area</p>
|
||
|
||
<p>“contain”: Scale the image to the largest size such that both its width and its height can fit inside the content area</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:33;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-bgrepeat</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"repeat", "no-repeat", "repeat-x","repeat-y"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The background-repeat property sets if/how a background image will be repeated.</p>
|
||
|
||
<p>The background image is placed according to the background-position property. If no background-position is specified, the image is
|
||
always placed at the element’s top left corner.</p>
|
||
|
||
<p>“repeat”: The background image will be repeated both vertically and horizontally. This is default</p>
|
||
|
||
<p>“repeat-x”: The background image will be repeated only horizontally</p>
|
||
|
||
<p>“repeat-y”: The background image will be repeated only vertically</p>
|
||
|
||
<p>“no-repeat”: The background-image will not be repeated</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="videobg" style="z-index:34;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="" style="display:block;clear:both;height:50px">
|
||
</div>
|
||
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<h5 class="subdirectory">Video Slide</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:35;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>To create a fullscreen / fullwidth video slider, please use first a simple Main image as Cover Image and a Video Layer with the
|
||
special class <strong>rs-background-video-laye</strong></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p><span class="crayon-ta"><img</span> <span class="crayon-e">src</span><span class="crayon-i">=”coverimage.jpg”</span><span class=
|
||
"crayon-h"> </span><span class="crayon-e">alt</span><span class="crayon-i">=””</span><span class=
|
||
"crayon-h"> </span><span class="crayon-e">width</span><span class="crayon-i">=”1920″</span> <span class=
|
||
"crayon-e">height</span><span class="crayon-i">=”1080″</span> <span class="crayon-e">data-bgposition</span><span class=
|
||
"crayon-i">=”center</span> <span class="crayon-i">center”</span> <span class="crayon-e">data-bgfit</span><span class=
|
||
"crayon-i">=”cover”</span> <span class="crayon-e">data-bgrepeat</span><span class="crayon-i">=”no-repeat”</span> <span class=
|
||
"crayon-e">class</span><span class="crayon-i">=”rev-slidebg”></span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>
|
||
</p>
|
||
<link href="assets/themepunch.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/monaco.css" rel="stylesheet" type="text/css">
|
||
|
||
<div class="crayon-syntax crayon-theme-themepunch crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=
|
||
" minimize scroll-mouseover wrap" id="crayon-55e9a0b81c6e2280337547" style=
|
||
"margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 30px ! important; height: auto;">
|
||
<div class="crayon-plain-wrap">
|
||
<textarea class="crayon-plain print-no" data-settings="" readonly="readonly" style=
|
||
"-moz-tab-size: 4; font-size: 14px ! important; line-height: 30px ! important; z-index: 0; opacity: 0; overflow: hidden;">
|
||
<div
|
||
class="rs-background-video-layer"
|
||
data-forcerewind="on"
|
||
data-volume="mute"
|
||
data-ytid="T8--OggjJKQ"
|
||
data-videoattributes="version=3&enablejsapi=1&html5=1&
|
||
hd=1&wmode=opaque&showinfo=0&
|
||
ref=0;;origin=http://server.local;"
|
||
data-videorate="1.5"
|
||
data-videowidth="100%"
|
||
data-videoheight="100%"
|
||
data-videocontrols="none"
|
||
data-videostartat="00:10"
|
||
data-videoendat="00:50"
|
||
data-videoloop="loopandnoslidestop"
|
||
data-forceCover="1"
|
||
data-aspectratio="16:9"
|
||
data-autoplay="true"
|
||
data-autoplayonlyfirsttime="false"
|
||
data-nextslideatend="true"
|
||
></div>
|
||
</textarea>
|
||
</div>
|
||
|
||
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
|
||
<table class="crayon-table" style=""><tbody><tr class="crayon-row"><td class="crayon-nums " data-settings="show"><div class="crayon-nums-content" style="font-size: 14px !important; line-height: 30px !important;"><div class="crayon-num" data-line="crayon-55eebdc25a957740819867-1" style="height: 30px;">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebdc25a957740819867-2" style="height: 30px;">2</div><div class="crayon-num" data-line="crayon-55eebdc25a957740819867-3" style="height: 30px;">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebdc25a957740819867-4" style="height: 30px;">4</div><div class="crayon-num" data-line="crayon-55eebdc25a957740819867-5" style="height: 60px;">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebdc25a957740819867-6" style="height: 30px;">6</div><div class="crayon-num" data-line="crayon-55eebdc25a957740819867-7" style="height: 30px;">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebdc25a957740819867-8" style="height: 30px;">8</div><div class="crayon-num" data-line="crayon-55eebdc25a957740819867-9" style="height: 30px;">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebdc25a957740819867-10" style="height: 30px;">10</div><div class="crayon-num" data-line="crayon-55eebdc25a957740819867-11" style="height: 30px;">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebdc25a957740819867-12" style="height: 30px;">12</div><div class="crayon-num" data-line="crayon-55eebdc25a957740819867-13" style="height: 30px;">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebdc25a957740819867-14" style="height: 30px;">14</div><div class="crayon-num" data-line="crayon-55eebdc25a957740819867-15" style="height: 30px;">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebdc25a957740819867-16" style="height: 30px;">16</div><div class="crayon-num" data-line="crayon-55eebdc25a957740819867-17" style="height: 30px;">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebdc25a957740819867-18" style="height: 30px;">18</div></div></td><td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 30px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-55eebdc25a957740819867-1"><span class="crayon-ta"><div </span><span class="crayon-e ">class</span><span class="crayon-i ">="rs-background-video-layer"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebdc25a957740819867-2"><span class="crayon-h"> </span><span class="crayon-e ">data-forcerewind</span><span class="crayon-i ">="on"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebdc25a957740819867-3"><span class="crayon-h"> </span><span class="crayon-e ">data-volume</span><span class="crayon-i ">="mute"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebdc25a957740819867-4"><span class="crayon-h"> </span><span class="crayon-e ">data-ytid</span><span class="crayon-i ">="T8--OggjJKQ"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebdc25a957740819867-5"><span class="crayon-h"> </span><span class="crayon-e ">data-videoattributes</span><span class="crayon-i ">="version=3&enablejsapi=1&html5=1&</span><span class="crayon-h"> </span><span class="crayon-i ">hd=1&wmode=opaque&showinfo=0&</span><span class="crayon-h"> </span><span class="crayon-i ">ref=0</span><span class="crayon-sy">;</span><span class="crayon-sy">;</span><span class="crayon-i ">origin=http</span><span class="crayon-sy">:</span><span class="crayon-i ">//server.local</span><span class="crayon-sy">;</span><span class="crayon-s">" </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebdc25a957740819867-6"><span class="crayon-s"> data-videorate="</span><span class="crayon-i ">1.5"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebdc25a957740819867-7"><span class="crayon-h"> </span><span class="crayon-e ">data-videowidth</span><span class="crayon-i ">="100%"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebdc25a957740819867-8"><span class="crayon-h"> </span><span class="crayon-e ">data-videoheight</span><span class="crayon-i ">="100%"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebdc25a957740819867-9"><span class="crayon-h"> </span><span class="crayon-e ">data-videocontrols</span><span class="crayon-i ">="none"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebdc25a957740819867-10"><span class="crayon-h"> </span><span class="crayon-e ">data-videostartat</span><span class="crayon-i ">="00</span><span class="crayon-sy">:</span><span class="crayon-i ">10"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebdc25a957740819867-11"><span class="crayon-h"> </span><span class="crayon-e ">data-videoendat</span><span class="crayon-i ">="00</span><span class="crayon-sy">:</span><span class="crayon-i ">50"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebdc25a957740819867-12"><span class="crayon-h"> </span><span class="crayon-e ">data-videoloop</span><span class="crayon-i ">="loopandnoslidestop"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebdc25a957740819867-13"><span class="crayon-h"> </span><span class="crayon-e ">data-forceCover</span><span class="crayon-i ">="1"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebdc25a957740819867-14"><span class="crayon-h"> </span><span class="crayon-e ">data-aspectratio</span><span class="crayon-i ">="16</span><span class="crayon-sy">:</span><span class="crayon-i ">9"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebdc25a957740819867-15"><span class="crayon-h"> </span><span class="crayon-e ">data-autoplay</span><span class="crayon-i ">="true"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebdc25a957740819867-16"><span class="crayon-h"> </span><span class="crayon-e ">data-autoplayonlyfirsttime</span><span class="crayon-i ">="false"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebdc25a957740819867-17"><span class="crayon-h"> </span><span class="crayon-e ">data-nextslideatend</span><span class="crayon-i ">="true"</span><span class="crayon-ta"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebdc25a957740819867-18"><span class="crayon-ta">></span><span class="crayon-ta"></div></span></div></div></td></tr></tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
<p>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>All Settings of the Video are similar to any Video layer which is discussed within the Layers Section under Media Layers. However
|
||
here again the most important data attributes for the Video Layers:</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:36;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-forcerewind</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"on","off"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>It rewinds the video to the start position (which is set via the data-videostartat parameter.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:37;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-volume</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">0-100, "mute"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Sets the Start Volume of the Video. It is advised to set Main Background Video volumes to “mute”. 100 is the max. Volume.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:38;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-videorate</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Float</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"0.1".."0.5".."1".."1.5"...</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The Speed of the Video. Only available for YouTube Videos. 1 is Normal Speed, 2 half slow, 0.5 is double quick, etc..</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:39;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-videowidth/data-videoheight</span> <span class="pdetails"><span class="pkey">Type:</span><span class=
|
||
"pval">Size (px,%)</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"100%"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The Video Width and Height. For FullScreen Cover mode please set the Background videos always to 100% width and height.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:40;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-videocontrols</span> <span class="pdetails"><span class="pkey">Type:</span><span class=
|
||
"pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"none","controls"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Enable / Disable the control panel of the Video. Will be ignored bei Vimeo, where Controls can not be disabled. We advise to
|
||
set this to “none” when you use videos as Main Background videos.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:41;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-videostartat</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Time</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"00:00"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>At which sec. the video should start. (Also force rewind will rewind the video back to this position). 00:05 means start
|
||
at the 5th sec. An exact position is not always possible. The next best frame will be picked around the defined time
|
||
position.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:42;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-videoendat</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Time</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"00:00"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>At which sec. the video should stop. All defined events will be triggered once the video reached this position (like next slide on
|
||
end, loop, rewind, etc..) 00:05 means end at the 5th sec. An exact position is not always possible. The next best
|
||
frame will be picked around the defined time position. Dont define this value in case you dont want a different end than the real
|
||
length of the video.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:43;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-videoloop</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"loop","loopandnoslidestop",""</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Defines if the Video should loop once the end has been reached (end can be defined also via data-videoendat).</p>
|
||
|
||
<p>If not defined, the video will play only once, and the timer of slider will cont to count down again, and/or further events will be
|
||
triggered</p>
|
||
|
||
<p>If value is “loop” the video will loop and stop also the Slider Timer. Slide will stay in position, and will only go to next
|
||
slide on user action.</p>
|
||
|
||
<p>if value set to “loopandnoslidestop” the video will loop during the slide timer continues to count down. If the video is
|
||
shorter, (i.e. data-videostartat and video-endat defined a shorter range) the video will loop till the end of the slide has been
|
||
reached.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:44;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-forceCover</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Integer</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"1"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>If value is set (to “1”) the video will always cover the slider dimensions. Means it will be zoomed to have a spaceless video
|
||
covering the full slider aligned to the center center position.</p>
|
||
|
||
<p> </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:45;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-aspectratio</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"4:3","16:9"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The aspect ratio of the Video. It helps to pre size the video before the Meta has been read.</p>
|
||
|
||
<p> </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:46;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-autoplay</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Boolean</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"true","false"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Starts the video as soon the Video Layer animated in to the Slide.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:47;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-autoplayonlyfirsttime</span> <span class="pdetails"><span class="pkey">Type:</span><span class=
|
||
"pval">Boolean</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"true","false"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Starts the video as soon the Video Layer animated in to the Slide but only the first time. In 2nd loop it sets the data-autoplay to
|
||
“false”. After 1 loop the Customer can manually start the video if needed.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:48;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-nextslideatend</span> <span class="pdetails"><span class="pkey">Type:</span><span class=
|
||
"pval">Boolean</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"true","false"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Auto call next slide when video reached the End time or in data-videoendat parameter defined time position. It will ignore
|
||
Slide Countdown process, and only works if Loop not set to Video.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:49;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-ytid</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"T8--OggjJKQ"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Defines the YouTube Video ID. Please define only one of the following possibilities per Video:</p>
|
||
|
||
<ul>
|
||
<li>data-ytid OR</li>
|
||
|
||
<li>data-vimeoid OR</li>
|
||
|
||
<li>data-videomp4</li>
|
||
</ul>
|
||
|
||
<p> </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:50;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-vimeoid</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"30300114"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Defines the Vimeo Video ID. Please define only one of the following possibilities per Video:</p>
|
||
|
||
<ul>
|
||
<li>data-ytid OR</li>
|
||
|
||
<li>data-vimeoid OR</li>
|
||
|
||
<li>data-videomp4</li>
|
||
</ul>
|
||
|
||
<p> </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:51;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-videomp4 / data-videowebm / data-videoogv</span> <span class="pdetails"><span class=
|
||
"pkey">Type:</span><span class="pval">Url</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">HTML 5 Video URL</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Defines the HTML5 Video Source file. Can be defined videomp4, videowebm and videogv in the same time to fall back on
|
||
different browsers if needed. Please define only one of the following possibilities per Video:</p>
|
||
|
||
<ul>
|
||
<li>data-ytid OR</li>
|
||
|
||
<li>data-vimeoid OR</li>
|
||
|
||
<li>data-videomp4 andor data-videowebm andor data-videoogv</li>
|
||
</ul>
|
||
|
||
<p> </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:52;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-videoattributes</span> <span class="pdetails"><span class="pkey">Type:</span><span class=
|
||
"pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">Video Attributes</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Define for Vimeo or YouTube Videos further Arguments.</p>
|
||
|
||
<p>i.e: YouTube Video Arguments:<br>
|
||
data-videoattributes=”version=3&enablejsapi=1&html5=1& hd=1&wmode=opaque&
|
||
showinfo=0&ref=0;;origin=http://server.local;”</p>
|
||
|
||
<p>Vimeo Video Arguments:</p>
|
||
|
||
<p>data-videoattributes=”title=0&byline=0&portrait=0&api=1″</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="solidcolorbg" style="z-index:53;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="" style="display:block;clear:both;height:50px">
|
||
</div>
|
||
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<h5 class="subdirectory">Solid Color Background</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="solidcolorbg" style="z-index:54;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>To solid color a Slide, simple use the main image tag and set the image source to a transparent png image as in our examples with
|
||
Solid color Backgrounds and set the img tag’s background to the color you wish to have as shown here:</p>
|
||
<link href="assets/themepunch.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/monaco.css" rel="stylesheet" type="text/css">
|
||
|
||
<div class="crayon-syntax crayon-theme-themepunch crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=
|
||
" minimize scroll-mouseover wrap" id="crayon-55e9a0b81c6f3764678850" style=
|
||
"margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 30px ! important; height: auto;">
|
||
<div class="crayon-plain-wrap">
|
||
<textarea class="crayon-plain print-no" data-settings="" readonly="readonly" style=
|
||
"-moz-tab-size: 4; font-size: 14px ! important; line-height: 30px ! important; z-index: 0; opacity: 0; overflow: hidden;">
|
||
<img src="images/dummy.png" style='background-color:#E7E7E7' alt="">
|
||
</textarea>
|
||
</div>
|
||
|
||
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
|
||
<table class="crayon-table"><tbody><tr class="crayon-row"><td class="crayon-nums " data-settings="show"><div class="crayon-nums-content" style="font-size: 14px !important; line-height: 30px !important;"><div class="crayon-num" data-line="crayon-55eebdc25a967051102999-1" style="height: 30px;">1</div></div></td><td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 30px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-55eebdc25a967051102999-1"><span class="crayon-ta"><img </span><span class="crayon-e ">src</span><span class="crayon-i ">="images/dummy.png"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span><span class="crayon-i ">='background-color</span><span class="crayon-sy">:</span><span class="crayon-i ">#E7E7E7'</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span><span class="crayon-i ">=""></span></div></div></td></tr></tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
<p>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="transparentbg" style="z-index:55;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="" style="display:block;clear:both;height:50px">
|
||
</div>
|
||
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<h5 class="subdirectory">Transparent Background</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="solidcolorbg" style="z-index:56;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Use the Main background image tag and use the prepared transparent.png file in the slider image container to show a simple
|
||
transparent Slide as shown here:</p>
|
||
<link href="assets/themepunch.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/monaco.css" rel="stylesheet" type="text/css">
|
||
|
||
<div class="crayon-syntax crayon-theme-themepunch crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=
|
||
" minimize scroll-mouseover wrap" id="crayon-55e9a0b81c6fb376591322" style=
|
||
"margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 30px ! important; height: auto;">
|
||
<div class="crayon-plain-wrap">
|
||
<textarea class="crayon-plain print-no" data-settings="" readonly="readonly" style=
|
||
"-moz-tab-size: 4; font-size: 14px ! important; line-height: 30px ! important; z-index: 0; opacity: 0; overflow: hidden;">
|
||
<img src="images/transparent.png" alt="">
|
||
</textarea>
|
||
</div>
|
||
|
||
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
|
||
<table class="crayon-table"><tbody><tr class="crayon-row"><td class="crayon-nums " data-settings="show"><div class="crayon-nums-content" style="font-size: 14px !important; line-height: 30px !important;"><div class="crayon-num" data-line="crayon-55eebdc25a96b191101132-1" style="height: 30px;">1</div></div></td><td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 30px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-55eebdc25a96b191101132-1"><span class="crayon-ta"><img </span><span class="crayon-e ">src</span><span class="crayon-i ">="images/transparent.png"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span><span class="crayon-i ">=""></span></div></div></td></tr></tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
<p>You may need to change the path to reference on the correct transparent.png file.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="linkandseo" style="z-index:57;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="" style="display:block;clear:both;height:50px">
|
||
</div>
|
||
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<h4>Link & Seo</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="solidcolorbg" style="z-index:58;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Links can be added on Slides and on Layers like HTML, Image, Shapes, Buttons. Links on Slides defined via parameters
|
||
within the List element (li) Tag.</p>
|
||
|
||
<p>Slide Links defined via the <strong>data-link</strong> and <strong>data-target</strong> and <strong>data-linktoslide</strong>
|
||
attributes. All settings are defined above in <a href="slides.html#datalink">Slide
|
||
Settings</a>.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="parallax" style="z-index:59;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="" style="display:block;clear:both;height:50px">
|
||
</div>
|
||
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<h4>Slide Parallax Effect</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="solidcolorbg" style="z-index:60;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>You can define parallax effects on Main Backgrounds (images, videos) via a single data attribute :
|
||
<strong>data-bgparallax </strong>added to the Main Background img tag (also for videos !!)</p>
|
||
|
||
<p>The parallax behavior is defined due the Slider Options where you can define an array of Parallax strengths and directions,
|
||
dependencies.</p>
|
||
|
||
<p>To set main Settings of the slider, please take a look on the <a href=
|
||
"slidersettings.html#parallax">Capital Parallax</a>.</p>
|
||
|
||
<p>i.e.:</p>
|
||
<link href="assets/themepunch.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/monaco.css" rel="stylesheet" type="text/css">
|
||
|
||
<div class="crayon-syntax crayon-theme-themepunch crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=
|
||
" minimize scroll-mouseover wrap" id="crayon-55e9a0b81c6ff494949531" style=
|
||
"margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 30px ! important; height: auto;">
|
||
<div class="crayon-plain-wrap">
|
||
<textarea class="crayon-plain print-no" data-settings="" readonly="readonly" style=
|
||
"-moz-tab-size: 4; font-size: 14px ! important; line-height: 30px ! important; z-index: 0; opacity: 0; overflow: hidden;">
|
||
<img
|
||
src="bgimage.jpg" alt="" width="1920" height="1080"
|
||
data-bgposition="center center" data-bgfit="cover"
|
||
data-bgrepeat="no-repeat" data-bgparallax="2" class="rev-slidebg">
|
||
</textarea>
|
||
</div>
|
||
|
||
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
|
||
<table class="crayon-table" style=""><tbody><tr class="crayon-row"><td class="crayon-nums " data-settings="show"><div class="crayon-nums-content" style="font-size: 14px !important; line-height: 30px !important;"><div class="crayon-num" data-line="crayon-55eebdc25a970510303998-1" style="height: 60px;">1</div></div></td><td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 30px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-55eebdc25a970510303998-1"><span class="crayon-ta"><img </span><span class="crayon-e ">src</span><span class="crayon-i ">="bgimage.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span><span class="crayon-i ">=""</span><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-i ">="1920"</span><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-i ">="1080"</span><span class="crayon-h"> </span><span class="crayon-e ">data-bgposition</span><span class="crayon-i ">="center</span><span class="crayon-h"> </span><span class="crayon-i ">center"</span><span class="crayon-h"> </span><span class="crayon-e ">data-bgfit</span><span class="crayon-i ">="cover"</span><span class="crayon-h"> </span><span class="crayon-e ">data-bgrepeat</span><span class="crayon-i ">="no-repeat"</span><span class="crayon-h"> </span><span class="crayon-e ">data-bgparallax</span><span class="crayon-i ">="2"</span><span class="crayon-h"> </span><span class="crayon-e ">class</span><span class="crayon-i ">="rev-slidebg"></span></div></div></td></tr></tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
<p> </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:61;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-bgparallax</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"off", "1".."10"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Defines the Parallax effect on the Background Image or Video. Off turns the effect off, values 1..10 are Reference indexes which
|
||
pulls the settings from the Parallax array defined via the Slider Settings <a href=
|
||
"slidersettings.html#parallax">here</a>.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="kenburns" style="z-index:62;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="" style="display:block;clear:both;height:50px">
|
||
</div>
|
||
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<h4>Ken Burns Effect</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="solidcolorbg" style="z-index:63;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>An elegant pan/zoom that will move and scale the main background image slowly after the slide comes into view.</p>
|
||
|
||
<h6>Horizontal / Vertical Offsets</h6>
|
||
|
||
<p>These offset values are in relation to your main background image’s Background Position value.</p>
|
||
|
||
<p>For example, if your Background Position is “center center”, entering a Horizontal Offset of “100” would mean 100px to the right of
|
||
the very center, which would then serve as the starting position of the Ken Burns effect. And a Horizontal Offset of “-100” would
|
||
be 100px to the left of center.</p>
|
||
|
||
<p><strong>Important Note</strong>
|
||
</p>
|
||
|
||
<p>The main background image’s “Background Position” plays an important role when setting up your Ken Burns effect.</p>
|
||
|
||
<p>For an example, set your “Scale To” value to “200”, and your “Scale From” value to “100”. Then set the image’s “Background Position”
|
||
to “center center” and preview the slide.</p>
|
||
|
||
<p>Then go back and change the “Background Position” to “top left”, and this will give you a good idea of how the main image’s
|
||
“Background Position” impacts the Ken Burns animation.</p>
|
||
<link href="assets/themepunch.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/monaco.css" rel="stylesheet" type="text/css">
|
||
|
||
<div class="crayon-syntax crayon-theme-themepunch crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=
|
||
" minimize scroll-mouseover wrap" id="crayon-55e9a0b81c705590744978" style=
|
||
"margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 30px ! important; height: auto;">
|
||
<div class="crayon-plain-wrap">
|
||
<textarea class="crayon-plain print-no" data-settings="" readonly="readonly" style=
|
||
"-moz-tab-size: 4; font-size: 14px ! important; line-height: 30px ! important; z-index: 0; opacity: 0; overflow: hidden;">
|
||
<img
|
||
src="bgimage.jpg" alt="" width="1920" height="1080"
|
||
data-bgposition="center center" data-kenburns="on" data-duration="10000"
|
||
data-ease="Power3.easeInOut" data-scalestart="100" data-scaleend="120"
|
||
data-rotatestart="0" data-rotateend="40" data-offsetstart="-250 -100"
|
||
data-offsetend="250 150" data-bgparallax="2" class="rev-slidebg"
|
||
data-no-retina>
|
||
</textarea>
|
||
</div>
|
||
|
||
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
|
||
<table class="crayon-table"><tbody><tr class="crayon-row"><td class="crayon-nums " data-settings="show"><div class="crayon-nums-content" style="font-size: 14px !important; line-height: 30px !important;"><div class="crayon-num" data-line="crayon-55eebdc25a974349549981-1" style="height: 120px;">1</div></div></td><td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 30px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-55eebdc25a974349549981-1"><span class="crayon-ta"><img </span><span class="crayon-e ">src</span><span class="crayon-i ">="bgimage.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span><span class="crayon-i ">=""</span><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-i ">="1920"</span><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-i ">="1080"</span><span class="crayon-h"> </span><span class="crayon-e ">data-bgposition</span><span class="crayon-i ">="center</span><span class="crayon-h"> </span><span class="crayon-i ">center"</span><span class="crayon-h"> </span><span class="crayon-e ">data-kenburns</span><span class="crayon-i ">="on"</span><span class="crayon-h"> </span><span class="crayon-e ">data-duration</span><span class="crayon-i ">="10000"</span><span class="crayon-h"> </span><span class="crayon-e ">data-ease</span><span class="crayon-i ">="Power3.easeInOut"</span><span class="crayon-h"> </span><span class="crayon-e ">data-scalestart</span><span class="crayon-i ">="100"</span><span class="crayon-h"> </span><span class="crayon-e ">data-scaleend</span><span class="crayon-i ">="120"</span><span class="crayon-h"> </span><span class="crayon-e ">data-rotatestart</span><span class="crayon-i ">="0"</span><span class="crayon-h"> </span><span class="crayon-e ">data-rotateend</span><span class="crayon-i ">="40"</span><span class="crayon-h"> </span><span class="crayon-e ">data-offsetstart</span><span class="crayon-i ">="-250</span><span class="crayon-h"> </span><span class="crayon-i ">-100"</span><span class="crayon-h"> </span><span class="crayon-e ">data-offsetend</span><span class="crayon-i ">="250</span><span class="crayon-h"> </span><span class="crayon-i ">150"</span><span class="crayon-h"> </span><span class="crayon-e ">data-bgparallax</span><span class="crayon-i ">="2"</span><span class="crayon-h"> </span><span class="crayon-e ">class</span><span class="crayon-i ">="rev-slidebg"</span><span class="crayon-h"> </span><span class="crayon-i ">data-no-retina></span></div></div></td></tr></tbody></table>
|
||
</div>
|
||
</div>
|
||
|
||
<p>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:64;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-kenburns</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">String</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"on","off"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Enables/Disables the Ken Burns Effect.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:65;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-duration</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Integer</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">10000</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The duration length of the Ken Burns Effect. It should be same or longer then the length of Slide Duration defined per slide or
|
||
default in slider settings.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:66;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-ease</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Ease</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"Power3.easeInOut"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The Ease effect of the Ken Burns Effect. You find a table of all possible values <a href=
|
||
"slides.html#easetable">here</a>.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:67;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-scalestart</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Integer</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"100"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The start Zoom Value. If the image would not cover the container any more, it will be automatically corrected to the next possible
|
||
value.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:68;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-scaleend</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Ease</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"Power3.easeInOut"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>The End Zoom Value of the Ken Burns Effect. If the image would not cover the container any more, it will be automatically
|
||
corrected to the next possible value.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:69;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-offsetstart</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">px px</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"-250 -100"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Two values, Horizontal and Vertical offsets for the Start position. It will be related to the Scale and background position
|
||
settings, and from that position it will move the full slide offsetting with the values set here. i.e -250 -100 will move the slide
|
||
250px to the right and 100 px to the bottom at start.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:70;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-offsetend</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">px px</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"250 100"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Two values, Horizontal and Vertical offsets for the End position. It will be related to the Scale and background position
|
||
settings, and from that position it will move the full slide offsetting with the values set here. i.e 250 100 will move the slide 250px
|
||
to the left and 100 px to the Top at the end of the ken burns effect.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:71;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-rotatestart</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Degree</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"0"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Defines the rotation degree of the SlideMain image at the start of the Ken Burns Effect. Use small values (positive or negative).
|
||
i.e. “-5” for a smooth and clever effect.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:72;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-3">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<span class="ybgbig">data-rotateend</span> <span class="pdetails"><span class="pkey">Type:</span><span class="pval">Degree</span><br>
|
||
<span class="pkey">Value:</span><span class="pval">"0"</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-9">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<p>Defines the rotation degree of the Slide Main image at the end of the Ken Burns Effect. Use small values (positive or
|
||
negative). i.e. “-5” for a smooth and clever effect.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:73;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="" style="display:block;clear:both;height:50px">
|
||
</div>
|
||
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<h4>Transition Table</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="transitiontable" style="z-index:74;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-6">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<ul>
|
||
<li><strong>BASICS</strong>
|
||
</li>
|
||
|
||
<li>notransition: No Transition</li>
|
||
|
||
<li>fade: Fade</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li><strong>SLIDE SIMPLE</strong>
|
||
</li>
|
||
|
||
<li>slideup: Slide To Top</li>
|
||
|
||
<li>slidedown: Slide To Bottom</li>
|
||
|
||
<li>slideright: Slide To Right</li>
|
||
|
||
<li>slideleft: Slide To Left</li>
|
||
|
||
<li>slidehorizontal: Slide Horizontal (Next/Previous)</li>
|
||
|
||
<li>slidevertical: Slide Vertical (Next/Previous)</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li><strong>SLIDE OVER</strong>
|
||
</li>
|
||
|
||
<li>slideoverup: Slide Over To Top</li>
|
||
|
||
<li>slideoverdown: Slide Over To Bottom</li>
|
||
|
||
<li>slideoverright: Slide Over To Right</li>
|
||
|
||
<li>slideoverleft: Slide Over To Left</li>
|
||
|
||
<li>slideoverhorizontal: Slide Over Horizontal (Next/Previous)</li>
|
||
|
||
<li>slideoververtical: Slide Over Vertical (Next/Previous),</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li><strong>SLOTS AND BOXES</strong>
|
||
</li>
|
||
|
||
<li>boxslide: Slide Boxes</li>
|
||
|
||
<li>slotslide: orizontal=>Slide Slots Horizontal</li>
|
||
|
||
<li>slotslide: ertical=>Slide Slots Vertical</li>
|
||
|
||
<li>boxfade: Fade Boxes</li>
|
||
|
||
<li>slotfade: orizontal=>Fade Slots Horizontal</li>
|
||
|
||
<li>slotfade: ertical=>Fade Slots Vertical</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li><strong>FADE & SLIDE</strong>
|
||
</li>
|
||
|
||
<li>fadefromright: Fade and Slide from Right</li>
|
||
|
||
<li>fadefromleft: Fade and Slide from Left</li>
|
||
|
||
<li>fadefromtop: Fade and Slide from Top</li>
|
||
|
||
<li>fadefrombottom: Fade and Slide from Bottom</li>
|
||
|
||
<li>fadetoleftfadefromright: To Left From Right</li>
|
||
|
||
<li>fadetorightfadefromleft: To Right From Left</li>
|
||
|
||
<li>fadetotopfadefrombottom: To Top From Bottom</li>
|
||
|
||
<li>fadetobottomfadefromtop: To Bottom From Top</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li><strong>PARALLAX</strong>
|
||
</li>
|
||
|
||
<li>parallaxtoright: Parallax to Right</li>
|
||
|
||
<li>parallaxtoleft: Parallax to Left</li>
|
||
|
||
<li>parallaxtotop: Parallax to Top</li>
|
||
|
||
<li>parallaxtobottom: Parallax to Bottom</li>
|
||
|
||
<li>parallaxhorizontal: Parallax Horizontal</li>
|
||
|
||
<li>parallaxvertical: Parallax Vertical,</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-6">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<ul>
|
||
<li><strong>ZOOM TRANSITIONS</strong>
|
||
</li>
|
||
|
||
<li>scaledownfromright: Zoom Out and Fade From Right</li>
|
||
|
||
<li>scaledownfromleft: Zoom Out and Fade From Left</li>
|
||
|
||
<li>scaledownfromtop: Zoom Out and Fade From Top</li>
|
||
|
||
<li>scaledownfrombottom: Zoom Out and Fade From Bottom</li>
|
||
|
||
<li>zoomout: ZoomOut</li>
|
||
|
||
<li>zoomin: ZoomIn</li>
|
||
|
||
<li>slotzoom: orizontal=>Zoom Slots Horizontal</li>
|
||
|
||
<li>slotzoom: ertical=>Zoom Slots Vertical</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li><strong>CURTAIN TRANSITIONS</strong>
|
||
</li>
|
||
|
||
<li>curtain: =>Curtain from Left</li>
|
||
|
||
<li>curtain: =>Curtain from Right</li>
|
||
|
||
<li>curtain: =>Curtain from Middle</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li><strong>PREMIUM TRANSITIONS</strong>
|
||
</li>
|
||
|
||
<li>3dcurtain: orizontal=>3D Curtain Horizontal</li>
|
||
|
||
<li>3dcurtain: ertical=>3D Curtain Vertical</li>
|
||
|
||
<li>cube: Cube Vertical</li>
|
||
|
||
<li>cube: orizontal=>Cube Horizontal</li>
|
||
|
||
<li>incube: In Cube Vertical</li>
|
||
|
||
<li>incube: orizontal=>In Cube Horizontal</li>
|
||
|
||
<li>turnoff: TurnOff Horizontal</li>
|
||
|
||
<li>turnoff: ertical=>TurnOff Vertical</li>
|
||
|
||
<li>papercut: Paper Cut</li>
|
||
|
||
<li>flyin: Fly In</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li><strong>SLIDE REMOVE</strong>
|
||
</li>
|
||
|
||
<li>slideremoveup: Slide Remove To Top</li>
|
||
|
||
<li>slideremovedown: Slide Remove To Bottom</li>
|
||
|
||
<li>slideremoveright: Slide Remove To Right</li>
|
||
|
||
<li>slideremoveleft: Slide Remove To Left</li>
|
||
|
||
<li>slideremovehorizontal: Slide Remove Horizontal (Next/Previous)</li>
|
||
|
||
<li>slideremovevertical: Slide Remove Vertical (Next/Previous),</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li><strong>RANDOM</strong>
|
||
</li>
|
||
|
||
<li>random: elected=>Random of Selected</li>
|
||
|
||
<li>random: tatic=>Random Flat</li>
|
||
|
||
<li>random: remium=>Random Premium</li>
|
||
|
||
<li>random: Random Flat and Premium</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:75;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-12">
|
||
<div class="wpb_wrapper">
|
||
<div class="" style="display:block;clear:both;height:px">
|
||
</div>
|
||
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<h4>Ease Table</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" id="easetable" style="z-index:76;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-4">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<ul>
|
||
<li>Default – Will Pick the best possible Ease</li>
|
||
|
||
<li>Linear.easeNone</li>
|
||
|
||
<li>Power0.easeIn</li>
|
||
|
||
<li>Power0.easeInOut</li>
|
||
|
||
<li>Power0.easeOut</li>
|
||
|
||
<li>Power1.easeIn</li>
|
||
|
||
<li>Power1.easeInOut</li>
|
||
|
||
<li>Power1.easeOut</li>
|
||
|
||
<li>Power2.easeIn</li>
|
||
|
||
<li>Power2.easeInOut</li>
|
||
|
||
<li>Power2.easeOut</li>
|
||
|
||
<li>Power3.easeIn</li>
|
||
|
||
<li>Power3.easeInOut</li>
|
||
|
||
<li>Power3.easeOut</li>
|
||
|
||
<li>Power4.easeIn</li>
|
||
|
||
<li>Power4.easeInOut</li>
|
||
|
||
<li>Power4.easeOut</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-4">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<ul>
|
||
<li>Quad.easeIn</li>
|
||
|
||
<li>Quad.easeInOut</li>
|
||
|
||
<li>Quad.easeOut</li>
|
||
|
||
<li>Cubic.easeIn</li>
|
||
|
||
<li>Cubic.easeInOut</li>
|
||
|
||
<li>Cubic.easeOut</li>
|
||
|
||
<li>Quart.easeIn</li>
|
||
|
||
<li>Quart.easeInOut</li>
|
||
|
||
<li>Quart.easeOut</li>
|
||
|
||
<li>Quint.easeIn</li>
|
||
|
||
<li>Quint.easeInOut</li>
|
||
|
||
<li>Quint.easeOut</li>
|
||
|
||
<li>Strong.easeIn</li>
|
||
|
||
<li>Strong.easeInOut</li>
|
||
|
||
<li>Strong.easeOut</li>
|
||
|
||
<li>Back.easeIn</li>
|
||
|
||
<li>Back.easeInOut</li>
|
||
|
||
<li>Back.easeOut</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-4">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_text_column wpb_content_element">
|
||
<div class="wpb_wrapper">
|
||
<ul>
|
||
<li>Bounce.easeIn</li>
|
||
|
||
<li>Bounce.easeInOut</li>
|
||
|
||
<li>Bounce.easeOut</li>
|
||
|
||
<li>Circ.easeIn</li>
|
||
|
||
<li>Circ.easeInOut</li>
|
||
|
||
<li>Circ.easeOut</li>
|
||
|
||
<li>Elastic.easeIn</li>
|
||
|
||
<li>Elastic.easeInOut</li>
|
||
|
||
<li>Elastic.easeOut</li>
|
||
|
||
<li>Expo.easeIn</li>
|
||
|
||
<li>Expo.easeInOut</li>
|
||
|
||
<li>Expo.easeOut</li>
|
||
|
||
<li>Sine.easeIn</li>
|
||
|
||
<li>Sine.easeInOut</li>
|
||
|
||
<li>Sine.easeOut</li>
|
||
|
||
<li>SlowMo.ease</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="tp_vc_mw_rowwrapper" style="z-index:77;">
|
||
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
|
||
<div class="rowbgimage_overlay" style="background-color:transparent;">
|
||
</div>
|
||
|
||
<div class="content_max_width">
|
||
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
|
||
<div class="wpb_column vc_column_container vc_col-sm-6">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<a class="tp-btn tp-large-button-yellow" href="navigation-settings-overview.html" target=
|
||
"_self"><i class="pe-7s-angle-left"></i> Back</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wpb_column vc_column_container vc_col-sm-6">
|
||
<div class="wpb_wrapper">
|
||
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
|
||
<div class="wpb_wrapper">
|
||
<div style="text-align:right">
|
||
<a class="tp-btn tp-large-button-yellow" href="layers.html" target="_self">Next <i class=
|
||
"pe-7s-angle-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="clear:both">
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottomspacer" style="height:35px;">
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sidebar_widget" id="sidebar-container">
|
||
<div class="widget-1 first clear">
|
||
</div>
|
||
|
||
<div class="widget-1 first miami_widget sidebar_widget widget_text" id="text-15">
|
||
<div class="textwidget">
|
||
<span style="background:#000; color:#fff; font-size:16px; font-weight:500; padding:0px 5px; line-height:22px;margin-bottom:5px">Slider Revolution 5.0 jQuery</span>
|
||
<span style="background:#000; color:#fff; font-size:16px; font-weight:500; padding:0px 5px; line-height:22px;">Documentation</span>
|
||
</div>
|
||
|
||
<div class="clear">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="widget-2 last clear">
|
||
</div>
|
||
|
||
<div class="widget-2 last miami_widget sidebar_widget widget_nav_menu" id="nav_menu-2">
|
||
<div class="menu-revslider-jquery-doc-container">
|
||
<ul class="menu" id="menu-revslider-jquery-doc">
|
||
<li class="menu-item menu-item-type-post_type menu-item-object-revsliderjquery-doc menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor=
|
||
"rgba(37,37,37,1)" id="menu-item-6109">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="get-started/">Get Started</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6116">
|
||
<a class="menu-link docu-link" href="get-started.html#introduction">Introduction</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6117">
|
||
<a class="menu-link docu-link" href="get-started.html#neededfiles">Needed Folders</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6118">
|
||
<a class="menu-link docu-link" href="get-started.html#installslider">Installing the Slider</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor" id="menu-item-6119">
|
||
<a class="menu-link docu-link" href="get-started.html#markup">The Markup</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6120">
|
||
<a class="menu-link docu-link" href="get-started.html#initialising">Initialising The Slider</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-post_type menu-item-object-revsliderjquery-doc menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor=
|
||
"rgba(37,37,37,1)" id="menu-item-6122">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="anatomy/">Anatomy of Slider Revolution</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6133">
|
||
<a class="menu-link docu-link" href="anatomy.html#components">Slider Components</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6128">
|
||
<a class="menu-link docu-link" href="anatomy.html#grid">Layer Grid</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6129">
|
||
<a class="menu-link docu-link" href="anatomy.html#gridvsslider">Layer Grid vs. Slider</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor="rgba(37,37,37,1)" id=
|
||
"menu-item-6132">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slider.html#slider">Slider</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6229">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slider.html#slidertype">Slider Types</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6130">
|
||
<a class="menu-link docu-link" href="slider.html#standard">Standard</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6131">
|
||
<a class="menu-link docu-link" href="slider.html#hero">Hero Block</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6135">
|
||
<a class="menu-link docu-link" href="slider.html#carousel">Carousel</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6231">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slider.html#sliderlayout">Slider Layouts</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6230">
|
||
<a class="menu-link docu-link" href="slider.html#auto">Auto Width</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6232">
|
||
<a class="menu-link docu-link" href="slider.html#fullwidth">Fullwidth</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6233">
|
||
<a class="menu-link docu-link" href="slider.html#fullscreen">Fullscreen</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6236">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slider.html#slidersize">Advanced Sizing</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6328">
|
||
<a class="menu-link docu-link" href="slider.html#gridsize">Grid Sizing</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6329">
|
||
<a class="menu-link docu-link" href="slider.html#aspectratio">Respect Aspect Ratio</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6330">
|
||
<a class="menu-link docu-link" href="slider.html#minimumheight">Minimum Height</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6331">
|
||
<a class="menu-link docu-link" href="slider.html#responsivelevels">Responsive Levels</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-post_type menu-item-object-revsliderjquery-doc menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor=
|
||
"rgba(37,37,37,1)" id="menu-item-6239">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slidersettings/">Slider Settings Overview</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6289">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slidersettings.html#layoutandsize">Layouts & Sizing</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6290">
|
||
<a class="menu-link docu-link" href="slidersettings.html#sliderType">sliderType</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6291">
|
||
<a class="menu-link docu-link" href="slidersettings.html#sliderLayout">sliderLayout</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6292">
|
||
<a class="menu-link docu-link" href="slidersettings.html#responsiveLevels">responsiveLevels</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6293">
|
||
<a class="menu-link docu-link" href="slidersettings.html#gridwidth">gridwidth</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6294">
|
||
<a class="menu-link docu-link" href="slidersettings.html#gridheight">gridheight</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6295">
|
||
<a class="menu-link docu-link" href="slidersettings.html#autoHeight">autoHeight</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6296">
|
||
<a class="menu-link docu-link" href="slidersettings.html#minHeight">minHeight</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6297">
|
||
<a class="menu-link docu-link" href=
|
||
"slidersettings.html#fullScreenAlignForce">fullScreenAlignForce</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6298">
|
||
<a class="menu-link docu-link" href=
|
||
"slidersettings.html#fullScreenOffsetContainer">fullScreenOffsetContainer</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6299">
|
||
<a class="menu-link docu-link" href="slidersettings.html#fullScreenOffset">fullScreenOffset</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6300">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slidersettings.html#progressing">Progressing</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6301">
|
||
<a class="menu-link docu-link" href="slidersettings.html#delay">delay</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6302">
|
||
<a class="menu-link docu-link" href="slidersettings.html#disableProgressBar">disableProgressBar</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6303">
|
||
<a class="menu-link docu-link" href="slidersettings.html#startDelay">startDelay</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6304">
|
||
<a class="menu-link docu-link" href="slidersettings.html#stopAfterLoops">stopAfterLoops</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6305">
|
||
<a class="menu-link docu-link" href="slidersettings.html#stopAtSlide">stopAtSlide</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6306">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slidersettings.html#viewPort">viewPort</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6307">
|
||
<a class="menu-link docu-link" href="slidersettings.html#viewPort">enable</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6308">
|
||
<a class="menu-link docu-link" href="slidersettings.html#viewPort">outof</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6309">
|
||
<a class="menu-link docu-link" href="slidersettings.html#viewPort">visible_area</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6310">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slidersettings.html#lazyType">Lazy Loading</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6311">
|
||
<a class="menu-link docu-link" href="slidersettings.html#lazyType">lazyType</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6312">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slidersettings.html#appandvis">Appearance and Visibility</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6313">
|
||
<a class="menu-link docu-link" href="slidersettings.html#dottedOverlay">dottedOverlay</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6314">
|
||
<a class="menu-link docu-link" href="slidersettings.html#shado">shadow</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6315">
|
||
<a class="menu-link docu-link" href="slidersettings.html#spinner">spinner</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6316">
|
||
<a class="menu-link docu-link" href=
|
||
"slidersettings.html#hideAllCaptionAtLimit">hideAllCaptionAtLimit</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6317">
|
||
<a class="menu-link docu-link" href="slidersettings.html#hideCaptionAtLimit">hideCaptionAtLimit</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6318">
|
||
<a class="menu-link docu-link" href="slidersettings.html#hideSliderAtLimit">hideSliderAtLimit</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6319">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slidersettings.html#generalsettings">General Settings</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6320">
|
||
<a class="menu-link docu-link" href="slidersettings.html#debugMode">debugMode</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6321">
|
||
<a class="menu-link docu-link" href="slidersettings.html#extensions">extensions</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6322">
|
||
<a class="menu-link docu-link" href="slidersettings.html#extensions_suffix">extensions_suffix</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6323">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slidersettings.html#fallbacks">fallbacks</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6324">
|
||
<a class="menu-link docu-link" href=
|
||
"slidersettings.html#fallbacks">panZoomDisableOnMobile</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6325">
|
||
<a class="menu-link docu-link" href="slidersettings.html#fallbacks">simplifyAll</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6326">
|
||
<a class="menu-link docu-link" href=
|
||
"slidersettings.html#fallbacks">nextSlideOnWindowFocus</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6327">
|
||
<a class="menu-link docu-link" href="slidersettings.html#fallbacks">disableFocusListener</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6332">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slidersettings.html#parallax">Parallax Effect</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6339">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slidersettings.html#parallax">parallax</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6333">
|
||
<a class="menu-link docu-link" href="slidersettings.html#parallax">type</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6334">
|
||
<a class="menu-link docu-link" href="slidersettings.html#parallax">levels</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6335">
|
||
<a class="menu-link docu-link" href="slidersettings.html#parallax">origo</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6336">
|
||
<a class="menu-link docu-link" href="slidersettings.html#parallax">speed</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6337">
|
||
<a class="menu-link docu-link" href="slidersettings.html#parallax">bgparallax</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6338">
|
||
<a class="menu-link docu-link" href="slidersettings.html#parallax">disable_onmobile</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6681">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">Carousel Settings</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6682">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">Carousel</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6683">
|
||
<a class="menu-link docu-link" href=
|
||
"slidersettings.html#carouselsettings">horizontal_align</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6684">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">vertical_align</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6685">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">infinity</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6686">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">space</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6687">
|
||
<a class="menu-link docu-link" href=
|
||
"slidersettings.html#carouselsettings">maxVisibleItems</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6688">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">stretch</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6689">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">fadeout</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6690">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">maxRotation</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6691">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">minScale</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6692">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">vary_fade</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6693">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">vary_rotation</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6694">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">vary_scale</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6695">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">border_radius</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6696">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">padding_top</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6697">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">padding_bottom</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-post_type menu-item-object-revsliderjquery-doc menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6700">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="navigation-settings-overview/">Navigation Settings</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6701">
|
||
<a class="menu-link docu-link" href=
|
||
"navigation-settings-overview.html#generalnavigationsettings">keyboardNavigation</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6702">
|
||
<a class="menu-link docu-link" href=
|
||
"navigation-settings-overview.html#generalnavigationsettings">keyboard_direction</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6703">
|
||
<a class="menu-link docu-link" href=
|
||
"navigation-settings-overview.html#generalnavigationsettings">mouseScrollNavigation</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6704">
|
||
<a class="menu-link docu-link" href=
|
||
"navigation-settings-overview.html#generalnavigationsettings">onHoverStop</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6705">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="navigation-settings-overview.html#touchsettings">touch</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6706">
|
||
<a class="menu-link docu-link" href=
|
||
"navigation-settings-overview.html#touchsettings">touchenabled</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6707">
|
||
<a class="menu-link docu-link" href=
|
||
"navigation-settings-overview.html#touchsettings">swipe_treshold</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6708">
|
||
<a class="menu-link docu-link" href=
|
||
"navigation-settings-overview.html#touchsettings">swipe_min_touches</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6709">
|
||
<a class="menu-link docu-link" href=
|
||
"navigation-settings-overview.html#touchsettings">drag_block_vertical</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6710">
|
||
<a class="menu-link docu-link" href=
|
||
"navigation-settings-overview.html#touchsettings">swipe_direction</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6761">
|
||
<a class="menu-link docu-link" href="navigation-settings-overview.html#arrowssettings">arrows</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6762">
|
||
<a class="menu-link docu-link" href="navigation-settings-overview.html#bulletssettings">bullets</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6763">
|
||
<a class="menu-link docu-link" href="navigation-settings-overview.html#thumbssettings">thumbnails</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6764">
|
||
<a class="menu-link docu-link" href="navigation-settings-overview.html#tabssettings">tabs</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class=
|
||
"menu-item menu-item-type-post_type menu-item-object-revsliderjquery-doc current-menu-item current-menu-ancestor current-menu-parent menu-item-has-children darknav docuwithsubmenu"
|
||
data-backgroundcolor="rgba(37,37,37,1)" id="menu-item-6785">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slides/">Slides</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class=
|
||
"menu-item menu-item-type-custom menu-item-object-custom current-menu-item current-menu-ancestor current-menu-parent menu-item-has-children hassubmenu docuwithsubmenu"
|
||
id="menu-item-6786">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slides.html#markup">Slide Basics</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-6787">
|
||
<a class="menu-link docu-link" href="slides.html#markup">Markup</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-6788">
|
||
<a class="menu-link docu-link" href="slides.html#settings">Settings Overview</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class=
|
||
"menu-item menu-item-type-custom menu-item-object-custom current-menu-item current-menu-ancestor current-menu-parent menu-item-has-children hassubmenu docuwithsubmenu"
|
||
id="menu-item-6921">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slides/">Slide Types</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-6922">
|
||
<a class="menu-link docu-link" href="slides.html#imagebg">Image Background</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-6923">
|
||
<a class="menu-link docu-link" href="slides.html#videobg">Video Background</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-6932">
|
||
<a class="menu-link docu-link" href="slides.html#solidcolorbg">Solid Color Background</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-6934">
|
||
<a class="menu-link docu-link" href="slides.html#transparentbg">Transparent Background</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-6935">
|
||
<a class="menu-link docu-link" href="slides.html#linkandseo">Link & Seo</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-6933">
|
||
<a class="menu-link docu-link" href="slides.html#kenburns">Ken Burns Effect</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-6936">
|
||
<a class="menu-link docu-link" href="slides.html#parallax">Parallax Effect</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-6937">
|
||
<a class="menu-link docu-link" href="slides.html#easetable">Ease Table</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-6938">
|
||
<a class="menu-link docu-link" href="slides.html#transitiontable">Transition Table</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-post_type menu-item-object-revsliderjquery-doc menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor=
|
||
"rgba(37,37,37,1)" id="menu-item-6941">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="layers/">Layers</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-7037">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="layers.html#layermarkup">Layer Basics</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7038">
|
||
<a class="menu-link docu-link" href="layers.html#layermarkup">Layer Markup</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7039">
|
||
<a class="menu-link docu-link" href="layers.html#layersettings">Settings Overview</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-7040">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="layers.html#layertypes">Layer Types</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7041">
|
||
<a class="menu-link docu-link" href="layers.html#htmllayer">HTML Layer</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7042">
|
||
<a class="menu-link docu-link" href="layers.html#imagelayer">Image Layer</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7043">
|
||
<a class="menu-link docu-link" href="layers.html#videolayer">Video Layer</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7044">
|
||
<a class="menu-link docu-link" href="layers.html#shapelayer">Shape Layer</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7045">
|
||
<a class="menu-link docu-link" href="layers.html#buttonlayer">Button Layer</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7156">
|
||
<a class="menu-link docu-link" href="layers.html#staticlayers">Static Layers</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7081">
|
||
<a class="menu-link docu-link" href="layer-actions.html#traditionallink">Layer Hyperlink Traditional</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7190">
|
||
<a class="menu-link docu-link" href="layers.html#parallaxlayer">Parallax Effect</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-7080">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="layer-actions/">Layer Actions</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7082">
|
||
<a class="menu-link docu-link" href="layer-actions.html#actionsyntax">Layer Action Syntax</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7083">
|
||
<a class="menu-link docu-link" href="layer-actions.html#actionlinks">Action Links
|
||
(Internal,external)</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7084">
|
||
<a class="menu-link docu-link" href="layer-actions.html#actionslider">Play/Pause/Toggle Slider</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7085">
|
||
<a class="menu-link docu-link" href="layer-actions.html#actionlayer">Start/Stop/Toggle Layer</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7086">
|
||
<a class="menu-link docu-link" href="layer-actions.html#actioncallback">Layer CallBack</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7087">
|
||
<a class="menu-link docu-link" href="layer-actions.html#actionvideo">Play/Pause/Toggle Video</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7088">
|
||
<a class="menu-link docu-link" href="layer-actions.html#actionclick">Simulate Click</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7089">
|
||
<a class="menu-link docu-link" href="layer-actions.html#actionclass">Toggle Class</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-7090">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="layer-animations/">Layer Animations</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7091">
|
||
<a class="menu-link docu-link" href="layer-animations.html#transidle">Idle State</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7092">
|
||
<a class="menu-link docu-link" href="layer-animations.html#transhover">Hover State & Hover
|
||
Style</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7093">
|
||
<a class="menu-link docu-link" href="layer-animations.html#transin">“In” Animation</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7094">
|
||
<a class="menu-link docu-link" href="layer-animations.html#transout">“Out” Animation</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7095">
|
||
<a class="menu-link docu-link" href="layer-animations.html#transmaskin">Mask “in” Animation</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7096">
|
||
<a class="menu-link docu-link" href="layer-animations.html#transmaskout">Mask “out” Animation</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-7101">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="layer-animations.html#loopmarkup">Layer Loop Animations</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7102">
|
||
<a class="menu-link docu-link" href="layer-animations.html#loopmarkup">Loop Basics</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7104">
|
||
<a class="menu-link docu-link" href="layer-animations.html#looptype">Loop Types</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor="rgba(37,37,37,1)" id=
|
||
"menu-item-7127">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="navigation/">Navigation</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7128">
|
||
<a class="menu-link docu-link" href="navigation.html#navbasic">Basics</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7129">
|
||
<a class="menu-link docu-link" href="navigation.html#navarrows">Arrows</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7130">
|
||
<a class="menu-link docu-link" href="navigation.html#navbullets">Bullets</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7131">
|
||
<a class="menu-link docu-link" href="navigation.html#navthumb">Thumbnails</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7132">
|
||
<a class="menu-link docu-link" href="navigation.html#navtabs">Tabs</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor="rgba(37,37,37,1)" id=
|
||
"menu-item-7171">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="api/">API</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7173">
|
||
<a class="menu-link docu-link" href="api/">Basics</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7172">
|
||
<a class="menu-link docu-link" href="api.html#apimethods">Methods</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7174">
|
||
<a class="menu-link docu-link" href="api.html#apievents">Events</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children darknav docuwithsubmenu"
|
||
data-backgroundcolor="rgba(37,37,37,1)" id="menu-item-7176">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="get-started/">Hyperlinking Slides & Layers</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7177">
|
||
<a class="menu-link docu-link" href="slides.html#datalink">Slide Link</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7178">
|
||
<a class="menu-link docu-link" href="layer-actions.html#traditionallink">Layer Traditional Link</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7179">
|
||
<a class="menu-link docu-link" href="layer-actions.html#actionlinks">Layer Action Link</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class=
|
||
"menu-item menu-item-type-custom menu-item-object-custom current-menu-item current-menu-ancestor current-menu-parent menu-item-has-children darknav docuwithsubmenu"
|
||
data-backgroundcolor="rgba(37,37,37,1)" id="menu-item-7180">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slides.html#videobg">Video Content</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7181">
|
||
<a class="menu-link docu-link" href="slides.html#videobg">Video as Background</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7182">
|
||
<a class="menu-link docu-link" href="layers.html#videolayer">Video as Layer</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children darknav docuwithsubmenu"
|
||
data-backgroundcolor="rgba(37,37,37,1)" id="menu-item-7183">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="slider/">Special Features</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7184">
|
||
<a class="menu-link docu-link" href="slider.html#carousel">Carousel</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7185">
|
||
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">Carousel Settings</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7186">
|
||
<a class="menu-link docu-link" href="slides.html#kenburns">Ken Burns Effect</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7187">
|
||
<a class="menu-link docu-link" href="slides.html#parallax">Parallax Effect Slide BG</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7191">
|
||
<a class="menu-link docu-link" href="layers.html#parallaxlayer">Parallax Effect Layer</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7192">
|
||
<a class="menu-link docu-link" href="slidersettings.html#viewPort">Pause/Resume Slider on Scroll</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor="rgba(37,37,37,1)" id=
|
||
"menu-item-7193">
|
||
<div class="menu-expander icon-angle-right" style="font-style: italic">
|
||
</div>
|
||
<a class="menu-link docu-link" href="updates">Updates & Support</a>
|
||
|
||
<ul class="sub-menu" style="display: none;">
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7195">
|
||
<a class="menu-link docu-link" href="updates">How to Update the Plugin</a>
|
||
</li>
|
||
|
||
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7194">
|
||
<a class="menu-link docu-link" href="http://www.themepunch.com/support-center/">Support Center</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="clear">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="clearfix">
|
||
</div>
|
||
</section>
|
||
</article>
|
||
</article>
|
||
<link href="assets/tp_vc_frontend.css" id="vc_extend_style-css" media="all" rel="stylesheet" type="text/css"><script src="assets/jquery_006.js" type=
|
||
"text/javascript"></script><script type="text/javascript">
|
||
var _wpcf7={"loaderUrl":"http:\/\/www.themepunch.com\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Sending ...","cached":"1"};
|
||
</script><script src="assets/scripts.js" type="text/javascript"></script><script src="assets/jquery_002.js" type="text/javascript"></script><script src="assets/ZeroClipboard.js" type="text/javascript"></script><script src="assets/main_002.js" type="text/javascript"></script><script src="assets/main.js" type="text/javascript"></script><script type="text/javascript">
|
||
var pollsL10n={"ajax_url":"http:\/\/www.themepunch.com\/wp-admin\/admin-ajax.php","text_wait":"Your last request is still being processed. Please wait a while ...","text_valid":"Please choose a valid poll answer.","text_multiple":"Maximum number of choices allowed: ","show_loading":"1","show_fading":"1"};
|
||
</script><script src="assets/polls-js.js" type="text/javascript"></script><script src="assets/bootstrap.js" type="text/javascript"></script><script src="assets/retina.js" type="text/javascript"></script><script src="assets/fitvid.js" type="text/javascript"></script><script type="text/javascript">
|
||
var miami={"sharrrephp":"http:\/\/www.themepunch.com\/wp-content\/themes\/miami\/assets\/js\/sharrre.php"};
|
||
</script><script src="assets/jquery_005.js" type="text/javascript"></script><script src="assets/jquery_008.js" type="text/javascript"></script><script src="assets/jquery_004.js" type="text/javascript"></script><script type="text/javascript">
|
||
var tp_search={"search_php":"http:\/\/www.themepunch.com\/wp-content\/themes\/miami\/framework\/theme_get_search_result.php","admin_php":"http:\/\/www.themepunch.com\/wp-admin\/admin-ajax.php","estoken":"f2f550fc0b"};
|
||
</script><script src="assets/screen.js" type="text/javascript"></script><script src="assets/comment-reply.js" type="text/javascript"></script><script src="assets/js_composer_front.js" type="text/javascript"></script><script src="assets/skrollr.js" type="text/javascript"></script><script type="text/javascript">
|
||
var countVars={"disqusShortname":"themepunch"};
|
||
</script><script src="assets/count.js" type="text/javascript"></script>
|
||
</body>
|
||
</html> |