Making Drupal 7 ViewsSlideshow Pager Clickable

While setting up a homepage slider, I used a modified version of the solutions found here. The solution provided worked great, except I needed a clickable version.

Create a new template called views-slideshow-slide-counter.tpl.php (notice that I changed it from above as I needed the ID to make the click work):

<?php
    $slide_count = count($view->result);
    for($i=1;$i<=$slide_count;++$i) {
        $n = $i - 1;
        $active = $i == 1 ? 'active' : '';
        print '  ';
    }
?>
 

In application.js:

(function($) {
  $(document).ready(function() {

    Drupal.viewsSlideshowSlideCounter.transitionBegin = function (options) {
      $('#views_slideshow_slide_counter_' + options.slideshowID + ' span').removeClass('active');
      $('#views_slideshow_slide_counter_' + options.slideshowID + ' .num' + (options.slideNum + 1)).addClass('active');
    };

    $('.slide-block').click(function() {
      var id = $(this).attr('id').split('-').pop();
      var options = {'action': 'goToSlide', 'slideshowID': 'homepage_slider-block', 'slideNum': parseInt(id)};
      Drupal.viewsSlideshow.action(options);
    });

  });
})(jQuery);

Hope this helps someone trying to figure out how to make the pager clickable.