1770 lines
160 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>Navigation - ThemePunch</title>
<meta content="en_US">
<meta content="article">
<meta content="Navigation - 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_004.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=7114" 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=B4A802890C002877DEF5A148D9911794');/*]]>*/
</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="assets/a.js" type="text/javascript"></script>
</head>
<body class="single single-revsliderjquery-doc postid-7114 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-7114 revsliderjquery-doc type-revsliderjquery-doc status-publish hentry category_revsliderjquery-doc-5-0 category_revsliderjquery-doc-anatomy"
id="page-7114">
<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;">Navigation</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">09.01.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="#navbasic"><span>1.</span> Navigation Basics</a>
</li>
<li>
<a href="#navarrows"><span>2.</span> Arrows</a>
</li>
<li>
</li>
<li>
<a href="#navbullets"><span>3.</span> Bullets</a>
</li>
<li>
<a href="#navthumb"><span>4.</span> Thumbnails</a>
</li>
<li>
<a href="#navtabs"><span>5.</span> Tabs</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: -18.8782%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" id="navbasic" 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>Navigation Basics</h4>
</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: -22.1239%;">
</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>In this capital we will focus on the 4 main types of Navigation Elements, Arrows, Bullets, Thubmnails and Tabs.</p>
<p>You will find a list of possible settings and options under the Navigation Settings <a href=
"navigation-settings-overview.html#generalnavigationsettings" target="_blank">here</a>.</p>
<p>Each Navigation Element is built due different individual components which&nbsp;are referenced due predefined Classes. &nbsp;If any
component exist with the predefined Class, the element will be drawn and becomes functionality due the Plugin.</p>
<p>In the following section we will discuss about the available Component and Classes per Navigation Element, their Styling and
functions.</p>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>For easy use, you can load the full Library of the Navigation skins due&nbsp;the revolution/css/navigation.css file or load only the
required skin styles one by one due the revolution/css/navigation-skins/.</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: -28.5714%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" id="navarrows" 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">
<h4>Arrows</h4>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Arrows used generally to navigate to the previous or to the next slider. &nbsp;If &nbsp;the setting <em>navigation:
{&nbsp;arrows:{enable:true}}</em> &nbsp;is active, two tparrows container added to the <strong>rev_slider</strong> container.</p>
<p>&nbsp;</p>
<p><strong>You find more to Global Arrow settings&nbsp;<a href=
"navigation-settings-overview.html#arrowssettings" target="_blank">here</a>.</strong>
</p>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Every Navigation Element used in Slider Revolution can/must be declared via Markup, Style and Placeholders. &nbsp;Markups are
defined with Placeholders , Predefined Classes and html5 markups which will later used for generating the Arrow Containers on
demand.</p>
<p>Based on the Placeholders, &nbsp;Classes and existing Markup elements, images, title and icons will be added or ignored.</p>
<p>If Arrows are enabled, the plugin will create&nbsp;two arrow Elements per Slider. Each Arrow has a global class
<strong>tparrows</strong> and an individual class <strong>tp-leftarrow</strong> and <strong>tp-rightarrow</strong>.</p>
<p>tp-leftarrow will trigger the previous slide, tp-rightarrow will trigger the next slide in the slider.</p>
<p><strong>Predefined&nbsp;Class</strong>
</p>
<ul>
<li><strong>tp-arr-imgholder</strong> If a container has this class, the style attribute background-image&nbsp;will be
dynamically draw the previous/next slide thumbnail. &nbsp;Thumbnails pulled from <em>data-thumb attribute of the Slides or from the
Main image defined in the Slide if data-thumb is not existing.</em></li>
</ul>
<p><strong>Placeholders in the Markup</strong>
</p>
<p>Placeholders are defined via {{placeholder}} . &nbsp;The two most used Placeholder are {{title}} and {{description}} which will pull
content from the Slide data-title and data-description attributes.</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-55e9a0ef47f88710506838" 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;">
&lt;div class="tp-title-wrap"&gt;
&lt;span class="tp-arr-titleholder"&gt;{{title}}&lt;/span&gt;
&lt;span class="tp-arr-imgholder"&gt;&lt;/span&gt;
&lt;/div&gt;
</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-55eec0ba1db24287271864-1" style="height: 30px;">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eec0ba1db24287271864-2" style="height: 30px;">2</div><div class="crayon-num" data-line="crayon-55eec0ba1db24287271864-3" style="height: 30px;">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eec0ba1db24287271864-4" style="height: 30px;">4</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-55eec0ba1db24287271864-1"><span class="crayon-ta">&lt;div </span><span class="crayon-e ">class</span><span class="crayon-k ">="tp-title-wrap"&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eec0ba1db24287271864-2"><span class="crayon-k ">&nbsp;&nbsp; &lt;span class="tp-arr-titleholder"&gt;</span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-i ">title</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-ta">&lt;/span&gt;</span></div><div class="crayon-line" id="crayon-55eec0ba1db24287271864-3"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-ta">&lt;span </span><span class="crayon-e ">class</span><span class="crayon-i ">="tp-arr-imgholder"&gt;&lt;/span&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eec0ba1db24287271864-4"><span class="crayon-ta">&lt;/div&gt;</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>Again, &nbsp;adding the Markup above to the Slider Settings via the tmp Key like&nbsp;navigation: { arrows: { tmp:’…’}} will draw an
Arrow with the Markup and replace the {{title}} with the previous/next slides data-title attribute, and will set the background image
of the tp-arr-imgholder container based on the data-thumb settings of the previous/next slide.</p>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Find all Navigation Examples in the Downloaded Package, &nbsp;under examples/Navigation folder.</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: -41.122%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" id="navbullets" 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-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>Bullets</h4>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Bullets&nbsp;used generally to navigate to a specific&nbsp;slide. &nbsp;If &nbsp;the setting <em>navigation: {
bullets:{enable:true}}</em> &nbsp;is active, a bullets wrapping container and as many bullets as many slides exists added&nbsp;&nbsp;to
the <strong>rev_slider</strong> container.</p>
<p>&nbsp;</p>
<p><strong>You find more to Global Bullets&nbsp;settings&nbsp;<a href=
"navigation-settings-overview.html#bulletssettings" target="_blank">here</a>.</strong>
</p>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Every Navigation Element used in Slider Revolution can/must be declared via Markup, Style and Placeholders. &nbsp;Markups are
defined with Placeholders , Predefined Classes and html5 markups which will later used for generating the Bullets&nbsp;on demand.</p>
<p>Based on the Placeholders, &nbsp;Classes and existing Markup elements, images, title and icons will be added or ignored.</p>
<p>If Bullets&nbsp;are enabled, the plugin will create as many Bullets as many Slides exists in the Slider. &nbsp;The Bullets wrapper
container will get a&nbsp;class name&nbsp;<strong>tp-bullets</strong>&nbsp;and each bullet within the tp-bullets will get the class
name tp-bullet.</p>
<p>&nbsp;</p>
<p><strong>Predefined&nbsp;Class</strong>
</p>
<ul>
<li><strong>tp-bullet-image</strong> If a container has this class, the style attribute background-image&nbsp;will be dynamically
draw the referenced&nbsp;slide thumbnail. &nbsp;Thumbnails pulled from <em>data-thumb attribute of the Slides or from the Main
image defined in the Slide if data-thumb is not existing.</em></li>
</ul>
<p><strong>Placeholders in the Markup</strong>
</p>
<p>Placeholders are defined via {{placeholder}} . &nbsp;The two most used Placeholder are {{title}} and {{description}} which will pull
content from the Slide data-title and data-description attributes.</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-55e9a0ef47f97712854328" 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;">
&lt;span class="tp-bullet-title"&gt;{{title}}&lt;/span&gt;
or with image:
&lt;span class="tp-bullet-image"&gt;&lt;/span&gt;
or combined both:
&lt;span class="tp-bullet-image"&gt;&lt;/span&gt;
&lt;span class="tp-bullet-imageoverlay"&gt;&lt;/span&gt;
&lt;span class="tp-bullet-title"&gt;{{title}}&lt;/span&gt;
</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-55eec0ba1db31977174019-1" style="height: 30px;">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eec0ba1db31977174019-2" style="height: 30px;">2</div><div class="crayon-num" data-line="crayon-55eec0ba1db31977174019-3" style="height: 30px;">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eec0ba1db31977174019-4" style="height: 30px;">4</div><div class="crayon-num" data-line="crayon-55eec0ba1db31977174019-5" style="height: 30px;">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eec0ba1db31977174019-6" style="height: 30px;">6</div><div class="crayon-num" data-line="crayon-55eec0ba1db31977174019-7" style="height: 30px;">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eec0ba1db31977174019-8" style="height: 30px;">8</div><div class="crayon-num" data-line="crayon-55eec0ba1db31977174019-9" style="height: 30px;">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eec0ba1db31977174019-10" style="height: 30px;">10</div><div class="crayon-num" data-line="crayon-55eec0ba1db31977174019-11" style="height: 30px;">11</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-55eec0ba1db31977174019-1"><span class="crayon-ta">&lt;span </span><span class="crayon-e ">class</span><span class="crayon-k ">="tp-bullet-title"&gt;</span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-i ">title</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-ta">&lt;/span&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eec0ba1db31977174019-2">&nbsp;</div><div class="crayon-line" id="crayon-55eec0ba1db31977174019-3"><span class="crayon-k ">or with image:</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eec0ba1db31977174019-4">&nbsp;</div><div class="crayon-line" id="crayon-55eec0ba1db31977174019-5"><span class="crayon-k ">&lt;span class="tp-bullet-image"&gt;&lt;/span&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eec0ba1db31977174019-6">&nbsp;</div><div class="crayon-line" id="crayon-55eec0ba1db31977174019-7"><span class="crayon-k ">or combined both:</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eec0ba1db31977174019-8">&nbsp;</div><div class="crayon-line" id="crayon-55eec0ba1db31977174019-9"><span class="crayon-k ">&lt;span class="tp-bullet-image"&gt;&lt;/span&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eec0ba1db31977174019-10"><span class="crayon-k ">&lt;span class="tp-bullet-imageoverlay"&gt;&lt;/span&gt;</span></div><div class="crayon-line" id="crayon-55eec0ba1db31977174019-11"><span class="crayon-k ">&lt;span class="tp-bullet-title"&gt;</span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-i ">title</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-ta">&lt;/span&gt;</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>Again, &nbsp;adding the Markup above to the Slider Settings via the tmp Key like&nbsp;navigation: { bullets: { tmp:’…’}} the slider
will draw a Bullet Wrapper &nbsp;Container &nbsp;with Bullets with the Markup and replace the {{title}} with the slides data-title
attribute, and will set the background image of the tp-bullet-image container based on the data-thumb settings of that slide.</p>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Find all Navigation Examples in the Downloaded Package, &nbsp;under examples/Navigation folder.</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="navthumb" 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-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>Thumbnails</h4>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Thumbnails&nbsp;used generally to navigate to a specific&nbsp;slide and show a short “preview” of the coming Slide. &nbsp;If
&nbsp;the setting <em>navigation: { thumbnails:{enable:true}}</em> &nbsp;is active, a Thumbnail&nbsp;wrapping container and as many
Thumbs&nbsp;as many slides exists added&nbsp;&nbsp;to the <strong>rev_slider</strong> container.</p>
<p>&nbsp;</p>
<p><strong>You find more to Global Thumbnail&nbsp;settings&nbsp;<a href=
"navigation-settings-overview.html#thumbssetings" target="_blank">here</a>.</strong>
</p>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Every Navigation Element used in Slider Revolution can/must be declared via Markup, Style and Placeholders. &nbsp;Markups are
defined with Placeholders , Predefined Classes and html5 markups which will later used for generating the Thumbnails&nbsp;on
demand.</p>
<p>Based on the Placeholders, &nbsp;Classes and existing Markup elements, images, title and icons will be added or ignored.</p>
<p>If Thumbnails&nbsp;are enabled, the plugin will create as many Thumbnails&nbsp;as many Slides exists in the Slider. &nbsp;The
Thumbnail&nbsp;wrapper container will build a structure of Masks, scrollers and internal wrappers. Each Thumbnail&nbsp;within these
Wrappers will get the class name tp-thumb.</p>
<p>&nbsp;</p>
<p><strong>Predefined&nbsp;Class</strong>
</p>
<ul>
<li><strong>tp-thumb-image</strong> If a container has this class, the style attribute background-image&nbsp;will be dynamically
draw the referenced&nbsp;slide thumbnail. &nbsp;Thumbnail images pulled from <em>data-thumb attribute of the Slides or from the
Main image defined in the Slide if data-thumb is not existing.</em></li>
</ul>
<p><strong>Placeholders in the Markup</strong>
</p>
<p>Placeholders are defined via {{placeholder}} . &nbsp;The two most used Placeholder are {{title}} and {{description}} which will pull
content from the Slide data-title and data-description attributes.</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-55e9a0ef47fa0824027147" 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;">
&lt;span class="tp-thumb-over"&gt;&lt;/span&gt;
&lt;span class="tp-thumb-image"&gt;&lt;/span&gt;
&lt;span class="tp-thumb-title"&gt;{{title}}&lt;/span&gt;
&lt;span class="tp-thumb-more"&gt;&lt;/span&gt;
</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-55eec0ba1db38745965558-1" style="height: 30px;">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eec0ba1db38745965558-2" style="height: 30px;">2</div><div class="crayon-num" data-line="crayon-55eec0ba1db38745965558-3" style="height: 30px;">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eec0ba1db38745965558-4" style="height: 30px;">4</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-55eec0ba1db38745965558-1"><span class="crayon-ta">&lt;span </span><span class="crayon-e ">class</span><span class="crayon-k ">="tp-thumb-over"&gt;&lt;/span&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eec0ba1db38745965558-2"><span class="crayon-k ">&lt;span class="tp-thumb-image"&gt;&lt;/span&gt;</span></div><div class="crayon-line" id="crayon-55eec0ba1db38745965558-3"><span class="crayon-k ">&lt;span class="tp-thumb-title"&gt;</span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-i ">title</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-ta">&lt;/span&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eec0ba1db38745965558-4"><span class="crayon-ta">&lt;span </span><span class="crayon-e ">class</span><span class="crayon-i ">="tp-thumb-more"&gt;&lt;/span&gt;</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>Again, &nbsp;adding the Markup above to the Slider Settings via the tmp Key like&nbsp;navigation: { thumbnails: { tmp:’…’}} the
slider will draw a Complex Structure of Thumbnail&nbsp;&nbsp;Wrapper &nbsp;Container &nbsp;with Single
Thumbnails.&nbsp;&nbsp;Thumbnails will get the Markup defined above and replace the {{title}} with the slides data-title attribute,
and will set the background image of the tp-thum-image container based on the data-thumb settings of that slide.</p>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Find all Navigation Examples in the Downloaded Package, &nbsp;under examples/Navigation folder.</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="navtabs" 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-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>Tabs</h4>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Tabs, just like Thumbnails&nbsp;used generally to navigate to a specific&nbsp;slide and show a short “preview” of the coming
Slide.</p>
<p>If &nbsp;the setting <em>navigation: { tabs:{enable:true}}</em> &nbsp;is active, a Tab&nbsp;wrapping container and as many
Tabs&nbsp;as many slides exists added&nbsp;&nbsp;to the <strong>rev_slider</strong> container.</p>
<p>&nbsp;</p>
<p><strong>You find more to Global Tabs&nbsp;settings&nbsp;<a href=
"navigation-settings-overview.html#tabssettings" target="_blank">here</a>.</strong>
</p>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Every Navigation Element used in Slider Revolution can/must be declared via Markup, Style and Placeholders. &nbsp;Markups are
defined with Placeholders , Predefined Classes and html5 markups which will later used for generating the Tabs&nbsp;on demand.</p>
<p>Based on the Placeholders, &nbsp;Classes and existing Markup elements, images, title and icons will be added or ignored.</p>
<p>If Tabs&nbsp;are enabled, the plugin will create as many Tabs&nbsp;as many Slides exists in the Slider. &nbsp;The Tab&nbsp;wrapper
container will build a structure of Masks, scrollers and internal wrappers. Each Tab&nbsp;within these Wrappers will get the class name
tp-tab.</p>
<p>&nbsp;</p>
<p><strong>Predefined&nbsp;Class</strong>
</p>
<ul>
<li><strong>tp-tab-image</strong> If a container has this class, the style attribute background-image&nbsp;will be dynamically
draw the referenced&nbsp;slide thumbnail. &nbsp;Thumbnail images pulled from <em>data-thumb attribute of the Slides or from the
Main image defined in the Slide if data-thumb is not existing.</em></li>
</ul>
<p><strong>Placeholders in the Markup</strong>
</p>
<p>Placeholders are defined via {{placeholder}} . &nbsp;The two most used Placeholder are {{title}} and {{description}} which will pull
content from the Slide data-title and data-description attributes.</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-55e9a0ef47fa8496896396" 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;">
&lt;div class="tp-tab-content"&gt;
&lt;span class="tp-tab-date"&gt;{{param1}}&lt;/span&gt;
&lt;span class="tp-tab-title"&gt;{{param2}}&lt;/span&gt;
&lt;/div&gt;
&lt;div class="tp-tab-image"&gt;&lt;/div&gt;
</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-55eec0ba1db3f357525302-1" style="height: 30px;">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eec0ba1db3f357525302-2" style="height: 30px;">2</div><div class="crayon-num" data-line="crayon-55eec0ba1db3f357525302-3" style="height: 30px;">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eec0ba1db3f357525302-4" style="height: 30px;">4</div><div class="crayon-num" data-line="crayon-55eec0ba1db3f357525302-5" style="height: 30px;">5</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-55eec0ba1db3f357525302-1"><span class="crayon-ta">&lt;div </span><span class="crayon-e ">class</span><span class="crayon-k ">="tp-tab-content"&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eec0ba1db3f357525302-2"><span class="crayon-k ">&nbsp;&nbsp;&lt;span class="tp-tab-date"&gt;</span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-i ">param1</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-ta">&lt;/span&gt;</span></div><div class="crayon-line" id="crayon-55eec0ba1db3f357525302-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-ta">&lt;span </span><span class="crayon-e ">class</span><span class="crayon-k ">="tp-tab-title"&gt;</span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-i ">param2</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-ta">&lt;/span&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eec0ba1db3f357525302-4"><span class="crayon-ta">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-55eec0ba1db3f357525302-5"><span class="crayon-ta">&lt;div </span><span class="crayon-e ">class</span><span class="crayon-i ">="tp-tab-image"&gt;&lt;/div&gt;</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>Again, &nbsp;adding the Markup above to the Slider Settings via the tmp Key like&nbsp;navigation: { thumbnails: { tmp:’…’}} the
slider will draw a Complex Structure of Tabs&nbsp; Wrapper &nbsp;Container &nbsp;with Single Tabs. &nbsp;Tabs will get the Markup
defined above and replace the {{param1}} with the slides data-param1 attribute, and will set the background image of the tp-tab-image
container based on the data-thumb settings of that slide.</p>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Find all Navigation Examples in the Downloaded Package, &nbsp;under examples/Navigation folder.</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-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="layer-animations.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="api.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" 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 &amp; 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 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 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" 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" 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 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" 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" 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" 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" 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" id="menu-item-6935">
<a class="menu-link docu-link" href="slides.html#linkandseo">Link &amp; Seo</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" 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" 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" 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" 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 &amp; 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 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-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 current-menu-item current-menu-ancestor" 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 current-menu-item" 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 current-menu-item" 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 current-menu-item" 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 current-menu-item" 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 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 &amp; Layers</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" 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 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" 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 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" 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" 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 &amp; 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_003.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>