SHARE
TWEET

LayerSlider 3.6 custom navigation area

a guest Jan 5th, 2013 11,986 Never
  1. <!-- Custom navigation bar -->
  2. <ul id="layerslider_nav">
  3.         <li>Layer #1</li>
  4.         <li>Layer #2</li>
  5.         <li>Layer #3</li>
  6.         <li>Layer #4</li>
  7.         <li>Layer #5</li>
  8. </ul>
  9.  
  10.  
  11.  
  12. <!-- Navigation bar style settings -->
  13. <style type="text/css">
  14.  
  15.         #layerslider_nav li {
  16.                 display: inline-block;
  17.         }
  18.  
  19.         #layerslider_nav li.active {
  20.                 color: red;
  21.         }
  22. </style>
  23.  
  24.  
  25.  
  26. <!-- Event handler for slide change -->
  27. <script type="text/javascript">
  28.         jQuery(document).ready(function() {
  29.                 jQuery('#layerslider_nav li').click(function(e) {
  30.  
  31.                         // Prevent browser's default submission
  32.                         e.preventDefault();
  33.  
  34.                         // Get selected layer index
  35.                         var index = jQuery(this).index() + 1;
  36.  
  37.                         // Change slide by calling LayerSlider API function
  38.                         jQuery('#layerslider_1').layerSlider(index);
  39.                 });
  40.         });
  41. </script>
  42.  
  43.  
  44.  
  45. <!-- cbAnimStop callback function to set active class and highlight -->
  46. function(data) {
  47.  
  48.         // Remove highlight from every menu item
  49.         jQuery('#layerslider_nav li').removeClass('active');
  50.  
  51.         // Get the index of the active layer
  52.         var index = data['curLayerIndex'] - 1;
  53.  
  54.         // Set active class and highlight
  55.         jQuery('#layerslider_nav li').eq(index).addClass('active');
  56. }
  57.  
  58. // BE AWARE !!!
  59. // to change the #layerslider_1 selector to your ID or class name
RAW Paste Data
Top