Advertisement
Guest User

LayerSlider 3.6 custom navigation area

a guest
Jan 5th, 2013
13,982
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement