SHARE
TWEET

LayerSlider 3.6 custom navigation area

a guest Jan 5th, 2013 12,591 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
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top