The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchase Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $29. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

Prerequisite

Review the Navigation Syntax first before continuing.

  1. Arrows
  2. Bullets
  3. Tabs
  4. Thumbs
  5. Attaching Slide Information

Arrows

back to top
  • 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

back to top
  • 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

back to top
  • 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

back to top
  • 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

back to top

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:

<!-- 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>

Popular Solutions