Create a weird scrolling navigation thing with Slick slider for jQuery

gistfile1.js

// Note that this is strange and horrible, but it works.

jQuery('.slick-slider-2').on('init', function(event, slick) {
    jQuery(this).find('.slick-dots li:eq(0)').addClass('asg-slick-active');
    jQuery(this).find('.slick-dots li:eq(1)').addClass('asg-slick-active-next');
    jQuery(this).find('.slick-dots li:first-child').before('<li class="asg-slick-active-prev"></li>');
    jQuery(this).find('.slick-dots li:last-child').after('<li></li>');
});

jQuery(".slick-slider-2").slick({
    dots: true,
    customPaging : function(slider, i) {
        var thumb = jQuery(slider.$slides[i]).data('tab');
        return '<a class="asg-tab">' + thumb + '</a>';
    },
    fade: true,
    adaptiveHeight: true,
    arrows: false
});

jQuery('.slick-slider-2').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    console.log(nextSlide);
    if (nextSlide === 0) {
        nextSlide = 5;
    }
    jQuery(this).find('.slick-dots li').removeClass('asg-slick-active asg-slick-active-prev asg-slick-active-next');
    jQuery(this).find('.slick-dots li:eq(' + (nextSlide) + ')').addClass('asg-slick-active');
    jQuery(this).find('.slick-dots li:eq(' + (nextSlide - 1) + ')').addClass('asg-slick-active-prev');
    jQuery(this).find('.slick-dots li:eq(' + (nextSlide + 1) + ')').addClass('asg-slick-active-next');
});