Navigation Styles

11.16.2016

Prerequisite:

Review the Navigation Syntax first before continuing.

Arrows


navigation: {
    arrows: {
        enable: true,
        style: 'hesperiden',

navigation: {

arrows: {

enable: true,

style: 'hesperiden',


navigation: {
    arrows: {
        enable: true,
        style: 'gyges',

navigation: {

arrows: {

enable: true,

style: 'gyges',


navigation: {
    arrows: {
        enable: true,
        style: 'hades',
        tmp: '<div class="tp-arr-allwrapper"><div class="tp-arr-imgholder"></div></div>',

navigation: {

arrows: {

enable: true,

style: 'hades',

tmp: '<div class="tp-arr-allwrapper"><div class="tp-arr-imgholder"></div></div>',


navigation: {
    arrows: {
        enable: true,
        style: 'ares', 
        tmp: '<div class="tp-title-wrap"><span class="tp-arr-titleholder">{{title}}</span></div>',

navigation: {

arrows: {

enable: true,

style: 'ares',

tmp: '<div class="tp-title-wrap"><span class="tp-arr-titleholder">{{title}}</span></div>',


navigation: {
    arrows: {
        enable: true,
        style: 'hebe',
        tmp: '<div class="tp-title-wrap"> <span class="tp-arr-titleholder">{{title}}</span><span class="tp-arr-imgholder"></span></div>',

navigation: {

arrows: {

enable: true,

style: 'hebe',

tmp: '<div class="tp-title-wrap"> <span class="tp-arr-titleholder">{{title}}</span><span class="tp-arr-imgholder"></span></div>',


navigation: {
    arrows: {
        enable: true,
        style: 'hermes',
        tmp: '<div class="tp-arr-allwrapper"><div class="tp-arr-imgholder"></div><div class="tp-arr-titleholder">{{title}}</div></div>',

navigation: {

arrows: {

enable: true,

style: 'hermes',

tmp: '<div class="tp-arr-allwrapper"><div class="tp-arr-imgholder"></div><div class="tp-arr-titleholder">{{title}}</div></div>',


navigation: {
    arrows: {
        enable: true,
        style: 'persephone',

navigation: {

arrows: {

enable: true,

style: 'persephone',


navigation: {
    arrows: {
        enable: true,
        style: 'erinyen',
        tmp: '<div class="tp-title-wrap"><div class="tp-arr-imgholder"></div><div class="tp-arr-img-over"></div><span class="tp-arr-titleholder">{{title}}</span></div>',

navigation: {

arrows: {

enable: true,

style: 'erinyen',

tmp: '<div class="tp-title-wrap"><div class="tp-arr-imgholder"></div><div class="tp-arr-img-over"></div><span class="tp-arr-titleholder">{{title}}</span></div>',


navigation: {
    arrows: {
        enable: true,
        style: 'zeus',
        tmp: '<div class="tp-title-wrap"><div class="tp-arr-imgholder"></div></div>',

navigation: {

arrows: {

enable: true,

style: 'zeus',

tmp: '<div class="tp-title-wrap"><div class="tp-arr-imgholder"></div></div>',


navigation: {
    arrows: {
        enable: true,
        style: 'metis',

navigation: {

arrows: {

enable: true,

style: 'metis',


navigation: {
    arrows: {
        enable: true,
        style: 'dione',
        tmp: '<div class="tp-arr-imgwrapper"><div class="tp-arr-imgholder"></div></div>',

navigation: {

arrows: {

enable: true,

style: 'dione',

tmp: '<div class="tp-arr-imgwrapper"><div class="tp-arr-imgholder"></div></div>',


navigation: {
    arrows: {
        enable: true,
        style: 'uranus',

navigation: {

arrows: {

enable: true,

style: 'uranus',

Bullets


navigation: {
    bullets: {
        enable: true,
        style: 'hesperiden',

navigation: {

bullets: {

enable: true,

style: 'hesperiden',


navigation: {
    bullets: {
        enable: true,
        style: 'gyges',

navigation: {

bullets: {

enable: true,

style: 'gyges',


navigation: {
    bullets: {
        enable: true,
        style: 'hades',
        tmp: '<span class="tp-bullet-image"></span>',

navigation: {

bullets: {

enable: true,

style: 'hades',

tmp: '<span class="tp-bullet-image"></span>',


navigation: {
    bullets: {
        enable: true,
        style: 'ares',
        tmp: '<span class="tp-bullet-title">{{title}}</span>',

navigation: {

bullets: {

enable: true,

style: 'ares',

tmp: '<span class="tp-bullet-title">{{title}}</span>',


navigation: {
    bullets: {
        enable: true,
        style: 'hebe',
        tmp: '<span class="tp-bullet-image"></span>'

navigation: {

bullets: {

enable: true,

style: 'hebe',

tmp: '<span class="tp-bullet-image"></span>'


navigation: {
    bullets: {
        enable: true,
        style: 'hermes',

navigation: {

bullets: {

enable: true,

style: 'hermes',


navigation: {
    bullets: {
        enable: true,
        style: 'hephaistos',

navigation: {

bullets: {

enable: true,

style: 'hephaistos',


navigation: {
    bullets: {
        enable: true,
        style: 'persephone',

navigation: {

bullets: {

enable: true,

style: 'persephone',


navigation: {
    bullets: {
        enable: true,
        style: 'erinyen',

navigation: {

bullets: {

enable: true,

style: 'erinyen',


navigation: {
    bullets: {
        enable: true,
        style: 'zeus',
        tmp: '<span class="tp-bullet-image"></span><span class="tp-bullet-imageoverlay"></span><span class="tp-bullet-title">{{title}}</span>'

navigation: {

bullets: {

enable: true,

style: 'zeus',

tmp: '<span class="tp-bullet-image"></span><span class="tp-bullet-imageoverlay"></span><span class="tp-bullet-title">{{title}}</span>'


navigation: {
    bullets: {
        enable: true,
        style: 'metis',
        tmp: '<span class="tp-bullet-img-wrap"><span class="tp-bullet-image"></span></span><span class="tp-bullet-title">{{title}}</span>'

navigation: {

bullets: {

enable: true,

style: 'metis',

tmp: '<span class="tp-bullet-img-wrap"><span class="tp-bullet-image"></span></span><span class="tp-bullet-title">{{title}}</span>'


navigation: {
    bullets: {
        enable: true,
        style: 'dione',
        tmp: '<span class="tp-bullet-img-wrap"><span class="tp-bullet-image"></span></span><span class="tp-bullet-title">{{title}}</span>'

navigation: {

bullets: {

enable: true,

style: 'dione',

tmp: '<span class="tp-bullet-img-wrap"><span class="tp-bullet-image"></span></span><span class="tp-bullet-title">{{title}}</span>'


navigation: {
    bullets: {
        enable: true,
        style: 'uranus',
        tmp: '<span class="tp-bullet-inner"></span>'

navigation: {

bullets: {

enable: true,

style: 'uranus',

tmp: '<span class="tp-bullet-inner"></span>'

Tabs


navigation: {
    tabs: {
        enable: true,
        style: 'hesperiden',
        width: 180,
        height: 65,
        min_width: 180,
        wrapper_padding: 0,
        wrapper_color: '#FFF',
        wrapper_opacity: '0.65',
        tmp: '<div class="tp-tab-content"><span class="tp-tab-date">{{param1}}</span><span class="tp-tab-title">{{title}}</span></div><div class="tp-tab-image"></div>',

navigation: {

tabs: {

enable: true,

style: 'hesperiden',

width: 180,

height: 65,

min_width: 180,

wrapper_padding: 0,

wrapper_color: '#FFF',

wrapper_opacity: '0.65',

tmp: '<div class="tp-tab-content"><span class="tp-tab-date">{{param1}}</span><span class="tp-tab-title">{{title}}</span></div><div class="tp-tab-image"></div>',


navigation: {
    tabs: {
        enable: true,
        style: 'gyges',
        width: 265,
        height: 65,
        min_width: 265,
        wrapper_padding: 0,
        wrapper_color: '#000',
        wrapper_opacity: '0.25',
        tmp: '<div class="tp-tab-content"> <span class="tp-tab-date">{{param1}}</span> <span class="tp-tab-title">{{title}}</span></div><div class="tp-tab-image"></div>',

navigation: {

tabs: {

enable: true,

style: 'gyges',

width: 265,

height: 65,

min_width: 265,

wrapper_padding: 0,

wrapper_color: '#000',

wrapper_opacity: '0.25',

tmp: '<div class="tp-tab-content"> <span class="tp-tab-date">{{param1}}</span> <span class="tp-tab-title">{{title}}</span></div><div class="tp-tab-image"></div>',


navigation: {
    tabs: {
        enable: true,
        style: 'hades',
        width: 150,
        height: 105,
        min_width: 150,
        direction: 'vertical',
        space: 20,
        span: true,
        wrapper_padding: 10,
        wrapper_color: '#FFF',
        wrapper_opacity: '0.85',
        tmp: '<div class="tp-tab-inner"> <span class="tp-tab-title">{{param1}}</span> <span class="tp-tab-price">{{param2}}</span> <span class="tp-tab-button">{{param3}}</span></div>',

navigation: {

tabs: {

enable: true,

style: 'hades',

width: 150,

height: 105,

min_width: 150,

direction: 'vertical',

space: 20,

span: true,

wrapper_padding: 10,

wrapper_color: '#FFF',

wrapper_opacity: '0.85',

tmp: '<div class="tp-tab-inner"> <span class="tp-tab-title">{{param1}}</span> <span class="tp-tab-price">{{param2}}</span> <span class="tp-tab-button">{{param3}}</span></div>',


navigation: {
    tabs: {
        enable: true,
        style: 'ares',
        width: 200,
        height: 80,
        min_width: 200,
        direction: 'vertical',
        space: 0,
        span: true,
        wrapper_padding: 0,
        wrapper_color: '#FFF',
        wrapper_opacity: '0.85',
        tmp: '<div class="tp-tab-content"><span class="tp-tab-date">{{param1}}</span><span class="tp-tab-title">{{param2}}</span></div><div class="tp-tab-image"></div>',

navigation: {

tabs: {

enable: true,

style: 'ares',

width: 200,

height: 80,

min_width: 200,

direction: 'vertical',

space: 0,

span: true,

wrapper_padding: 0,

wrapper_color: '#FFF',

wrapper_opacity: '0.85',

tmp: '<div class="tp-tab-content"><span class="tp-tab-date">{{param1}}</span><span class="tp-tab-title">{{param2}}</span></div><div class="tp-tab-image"></div>',


navigation: {
    tabs: {
        enable: true,
        style: 'hebe',
        width: 150,
        height: 50,
        min_width: 150,
        direction: 'vertical',
        space: 25,
        wrapper_padding: 20,
        wrapper_color: '#000',
        wrapper_opacity: '0.65',
        tmp: '<div class="tp-tab-title">{{param1}}</div><div class="tp-tab-desc">{{title}}</div>',

navigation: {

tabs: {

enable: true,

style: 'hebe',

width: 150,

height: 50,

min_width: 150,

direction: 'vertical',

space: 25,

wrapper_padding: 20,

wrapper_color: '#000',

wrapper_opacity: '0.65',

tmp: '<div class="tp-tab-title">{{param1}}</div><div class="tp-tab-desc">{{title}}</div>',


navigation: {
    tabs: {
        enable: true,
        style: 'hermes',
        width: 200,
        height: 150,
        min_width: 200,
        space: 0,
        tmp: '<span class="tp-tab-image"></span><span class="tp-tab-content-wrapper"><span class="tp-tab-bg"></span><span class="tp-tab-content"> <span class="tp-tab-date">{{param1}}</span> <span class="tp-tab-title">{{param2}}</span></span></span>',

navigation: {

tabs: {

enable: true,

style: 'hermes',

width: 200,

height: 150,

min_width: 200,

space: 0,

tmp: '<span class="tp-tab-image"></span><span class="tp-tab-content-wrapper"><span class="tp-tab-bg"></span><span class="tp-tab-content"> <span class="tp-tab-date">{{param1}}</span> <span class="tp-tab-title">{{param2}}</span></span></span>',


navigation: {
    tabs: {
        enable: true,
        style: 'erinyen',
        width: 180,
        height: 20,
        min_width: 180,
        tmp: '<div class="tp-tab-title">{{title}}</div><div class="tp-tab-desc">{{description}}</div>',

navigation: {

tabs: {

enable: true,

style: 'erinyen',

width: 180,

height: 20,

min_width: 180,

tmp: '<div class="tp-tab-title">{{title}}</div><div class="tp-tab-desc">{{description}}</div>',


navigation: {
    tabs: {
        enable: true,
        style: 'zeus',
        width: 180,
        height: 30,
        min_width: 180,
        tmp: '<span class="tp-tab-title">{{title}}</span>',

navigation: {

tabs: {

enable: true,

style: 'zeus',

width: 180,

height: 30,

min_width: 180,

tmp: '<span class="tp-tab-title">{{title}}</span>',


navigation: {
    tabs: {
        enable: true,
        style: 'metis',
        width: 400,
        height: 30,
        direction: 'vertical',
        span: true,
        space: 20,
        tmp: '<div class="tp-tab-wrapper"><div class="tp-tab-number">{{param1}}</div><div class="tp-tab-divider"></div><div class="tp-tab-title-mask"><div class="tp-tab-title">{{title}}</div></div></div>',

navigation: {

tabs: {

enable: true,

style: 'metis',

width: 400,

height: 30,

direction: 'vertical',

span: true,

space: 20,

tmp: '<div class="tp-tab-wrapper"><div class="tp-tab-number">{{param1}}</div><div class="tp-tab-divider"></div><div class="tp-tab-title-mask"><div class="tp-tab-title">{{title}}</div></div></div>',

Thumbs


navigation: {
    arrows: {
        enable: true,
        style: 'hesperiden',
        width: 100,
        height: 50,
        min_width: 100,
        space: 5,
        tmp:'<span class="tp-thumb-image"></span><span class="tp-thumb-title">{{title}}</span>',

navigation: {

arrows: {

enable: true,

style: 'hesperiden',

width: 100,

height: 50,

min_width: 100,

space: 5,

tmp:'<span class="tp-thumb-image"></span><span class="tp-thumb-title">{{title}}</span>',


navigation: {
    arrows: {
        enable: true,
        style: 'gyges',
        width: 100,
        height: 50,
        min_width: 100,
        space: 5,
        tmp: '<span class="tp-thumb-img-wrap"><span class="tp-thumb-image"></span></span>',

navigation: {

arrows: {

enable: true,

style: 'gyges',

width: 100,

height: 50,

min_width: 100,

space: 5,

tmp: '<span class="tp-thumb-img-wrap"><span class="tp-thumb-image"></span></span>',


navigation: {
    arrows: {
        enable: true,
        style: 'hades',
        width: 50,
        height: 50,
        min_width: 50,
        space: 5,
        tmp: '<span class="tp-thumb-img-wrap"><span class="tp-thumb-image"></span></span>',

navigation: {

arrows: {

enable: true,

style: 'hades',

width: 50,

height: 50,

min_width: 50,

space: 5,

tmp: '<span class="tp-thumb-img-wrap"><span class="tp-thumb-image"></span></span>',


navigation: {
    arrows: {
        enable: true,
        style: 'erinyen',
        width: 180,
        height: 100,
        min_width: 180,
        space: 15,
        tmp: '<span class="tp-thumb-over"></span><span class="tp-thumb-image"></span><span class="tp-thumb-title">{{title}}</span><span class="tp-thumb-more"></span>',

navigation: {

arrows: {

enable: true,

style: 'erinyen',

width: 180,

height: 100,

min_width: 180,

space: 15,

tmp: '<span class="tp-thumb-over"></span><span class="tp-thumb-image"></span><span class="tp-thumb-title">{{title}}</span><span class="tp-thumb-more"></span>',


navigation: {
    arrows: {
        enable: true,
        style: 'zeus',
        width: 180,
        height: 100,
        min_width: 180,
        space: 15,
        tmp: '<span class="tp-thumb-over"></span><span class="tp-thumb-image"></span><span class="tp-thumb-title">{{title}}</span><span class="tp-thumb-more"></span>',

navigation: {

arrows: {

enable: true,

style: 'zeus',

width: 180,

height: 100,

min_width: 180,

space: 15,

tmp: '<span class="tp-thumb-over"></span><span class="tp-thumb-image"></span><span class="tp-thumb-title">{{title}}</span><span class="tp-thumb-more"></span>',

Attaching Slide Information to the Navigation

Many of the available navigation styles include a special setting for pulling in a slide’s data such as its title and thumbnail. As an example, a navigation style might have the following for its “tmp” setting:


tmp: '<div class="tp-tab-content">
          <span class="tp-tab-date">{{param1}}</span>
          <span class="tp-tab-title">{{title}}</span>
      </div>
      <div class="tp-tab-image"></div>',

tmp: '<div class="tp-tab-content">

<span class="tp-tab-date">{{param1}}</span>

<span class="tp-tab-title">{{title}}</span>

</div>

<div class="tp-tab-image"></div>',

which would then be pulled from the “data-title”, “data-param1” and “data-thumb” attributes from the individual slides:


<!-- Data for navigation added as attributes to the slide -->
<li data-transition="fade" 
    data-title="Slide Title" 
    data-param1="Additional Text" 
    data-thumb="assets/images/notgeneric_bg3-100x50.jpg">

        <!-- slide's main background image -->
        <img src="assets/images/notgeneric_bg3.jpg" alt="Sky" class="rev-slidebg">

</li>

<li data-transition="fade"

data-title="Slide Title"

data-param1="Additional Text"

data-thumb="assets/images/notgeneric_bg3-100x50.jpg">

</li>

Back