Navigation Styles
Prerequisite:
Review the Navigation Syntax first before continuing.

1 2 3 4 5 6 |
navigation: { arrows: { enable: true, style: 'hesperiden', |

1 2 3 4 5 6 |
navigation: { arrows: { enable: true, style: 'gyges', |

1 2 3 4 5 6 7 |
navigation: { arrows: { enable: true, style: 'hades', tmp: '<div class="tp-arr-allwrapper"><div class="tp-arr-imgholder"></div></div>', |

1 2 3 4 5 6 7 |
navigation: { arrows: { enable: true, style: 'ares', tmp: '<div class="tp-title-wrap"><span class="tp-arr-titleholder">{{title}}</span></div>', |

1 2 3 4 5 6 7 |
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>', |

1 2 3 4 5 6 7 |
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>', |

1 2 3 4 5 6 |
navigation: { arrows: { enable: true, style: 'persephone', |

1 2 3 4 5 6 7 |
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>', |

1 2 3 4 5 6 7 |
navigation: { arrows: { enable: true, style: 'zeus', tmp: '<div class="tp-title-wrap"><div class="tp-arr-imgholder"></div></div>', |

1 2 3 4 5 6 |
navigation: { arrows: { enable: true, style: 'metis', |

1 2 3 4 5 6 7 |
navigation: { arrows: { enable: true, style: 'dione', tmp: '<div class="tp-arr-imgwrapper"><div class="tp-arr-imgholder"></div></div>', |

1 2 3 4 5 6 |
navigation: { arrows: { enable: true, style: 'uranus', |

1 2 3 4 5 6 |
navigation: { bullets: { enable: true, style: 'hesperiden', |

1 2 3 4 5 6 |
navigation: { bullets: { enable: true, style: 'gyges', |

1 2 3 4 5 6 7 |
navigation: { bullets: { enable: true, style: 'hades', tmp: '<span class="tp-bullet-image"></span>', |

1 2 3 4 5 6 7 |
navigation: { bullets: { enable: true, style: 'ares', tmp: '<span class="tp-bullet-title">{{title}}</span>', |

1 2 3 4 5 6 7 |
navigation: { bullets: { enable: true, style: 'hebe', tmp: '<span class="tp-bullet-image"></span>' |

1 2 3 4 5 6 |
navigation: { bullets: { enable: true, style: 'hermes', |

1 2 3 4 5 6 |
navigation: { bullets: { enable: true, style: 'hephaistos', |

1 2 3 4 5 6 |
navigation: { bullets: { enable: true, style: 'persephone', |

1 2 3 4 5 6 |
navigation: { bullets: { enable: true, style: 'erinyen', |

1 2 3 4 5 6 7 |
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>' |

1 2 3 4 5 6 7 |
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>' |

1 2 3 4 5 6 7 |
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>' |

1 2 3 4 5 6 7 |
navigation: { bullets: { enable: true, style: 'uranus', tmp: '<span class="tp-bullet-inner"></span>' |

1 2 3 4 5 6 7 8 9 10 11 12 13 |
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>', |

1 2 3 4 5 6 7 8 9 10 11 12 13 |
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>', |

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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>', |

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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>', |

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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>', |

1 2 3 4 5 6 7 8 9 10 11 |
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>', |

1 2 3 4 5 6 7 8 9 10 |
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>', |

1 2 3 4 5 6 7 8 9 10 |
navigation: { tabs: { enable: true, style: 'zeus', width: 180, height: 30, min_width: 180, tmp: '<span class="tp-tab-title">{{title}}</span>', |

1 2 3 4 5 6 7 8 9 10 11 12 |
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>', |

1 2 3 4 5 6 7 8 9 10 11 |
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>', |

1 2 3 4 5 6 7 8 9 10 11 |
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>', |

1 2 3 4 5 6 7 8 9 10 11 |
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>', |

1 2 3 4 5 6 7 8 9 10 11 |
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>', |

1 2 3 4 5 6 7 8 9 10 11 |
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:
1 2 3 4 5 6 7 |
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:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- 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> |