frontend.customSlider = {}
frontend.customSlider.init = function() {
  $('.custom-image-slider').after('<div class="custom-image-slider-wrapper"><ul class="custom-image-slider-wrapper-nav">').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 7000,
        pager:  '.custom-image-slider-wrapper-nav',
        pagerAnchorBuilder: function(idx, slide) {
            idx = idx+1;
            if(idx==1) {
                return '<li><a href="#">'+idx+'</a></li>';
            } else {
                return '<li>|<a href="#">'+idx+'</a></li>';    
            }
            
        }
    });
}

$(frontend.customSlider.init);