LayerSlider 3.6 custom navigation area

<!-- Custom navigation bar -->
<ul id="layerslider_nav">
    <li>Layer #1</li>
    <li>Layer #2</li>
    <li>Layer #3</li>
    <li>Layer #4</li>
    <li>Layer #5</li>
</ul>



<!-- Navigation bar style settings -->
<style type="text/css">

    #layerslider_nav li {
        display: inline-block;
    }

    #layerslider_nav li.active {
        color: red;
    }
</style>



<!-- Event handler for slide change -->
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#layerslider_nav li').click(function(e) {

            // Prevent browser's default submission
            e.preventDefault();

            // Get selected layer index
            var index = jQuery(this).index() + 1;

            // Change slide by calling LayerSlider API function
            jQuery('#layerslider_1').layerSlider(index);
        });
    });
</script>



<!-- cbAnimStop callback function to set active class and highlight -->
function(data) {

    // Remove highlight from every menu item
    jQuery('#layerslider_nav li').removeClass('active');

    // Get the index of the active layer
    var index = data['curLayerIndex'] - 1;

    // Set active class and highlight
    jQuery('#layerslider_nav li').eq(index).addClass('active');
}

// BE AWARE !!!
// to change the #layerslider_1 selector to your ID or class name