Navigation Styles – ThemePunch

Prerequisite

Review the Navigation Syntax first before continuing.

Arrows
Bullets
Tabs
Thumbs
Attaching Slide Information

Arrows

Hesperiden
Gyges
Hades
Ares
Hebe
Hermes
Persephone
Erinyen
Zeus
Metis
Dione
Uranus

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

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: '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: '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: '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: '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: 'uranus',

Bullets

Hesperiden
Gyges
Hades
Ares
Hebe
Hermes
Hephaistos
Persephone
Erinyen
Zeus
Metis
Dione
Uranus

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

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

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: 'hebe',
        tmp: '<span class="tp-bullet-image"></span>'

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

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

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

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: '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: 'uranus',
        tmp: '<span class="tp-bullet-inner"></span>'

Tabs

Hesperiden
Gyges
Hades
Ares
Hebe
Hermes
Erinyen
Zeus
Metis

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: '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: '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: '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: '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

Hesperiden
Gyges
Hades
Erinyen
Zeus

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: '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: '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>',

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

<li data-transition="fade"
    data-title="Slide Title"
    data-param1="Additional Text"
    data-thumb="assets/images/notgeneric_bg3-100x50.jpg">

        
        <img src="assets/images/notgeneric_bg3.jpg" alt="Sky" class="rev-slidebg">

</li>