custom slider for gliffy

fancy_slider.js

$.fn.extend({
    fancy_slider: function() {
        var slider = {
            el: {
                slider: $(this).find('.slider-wrapper'),
                holder: $(this).find('.slider-container'),
                imgSlide: $(this).find('.slide'),
                slider_nav: $(this).find('.slider-nav'),
                all_nav_buttons: $(this).find('.slider-nav > a'),
                title_navigation: $(this).find('.product-tab')
            },
            slideWidth: $('.gliffy-slider').outerWidth(),
            
            active_circle: '<i class="fa fa-circle" aria-hidden="true"></i>',
            circle: '<i class="fa fa-circle-thin" aria-hidden="true"></i>',
            
            touchstartx: undefined,
            touchmovex: undefined,
            movex: undefined,
            index: 0,
            longTouch: undefined,
            timing: 250,
            
            init: function() {
                this.bindUIEvents();
            },
            
            bindUIEvents: function() {
                this.el.holder.on('touchstart', function(event) {
                    slider.start(event);
                });
                this.el.holder.on('touchmove', function(event) {
                    slider.move(event);
                });
                this.el.holder.on('touchend', function(event) {
                    slider.end(event);
                });
                this.el.slider_nav.on('click', 'a', function(event) {
                    slider.handle_nav_click(event, this);
                });
                this.el.title_navigation.on('click', function(event) {
                    slider.handle_nav_click(event, this);
                })
            },
            
            start: function(event) {
                this.slideWidth = $('.gliffy-slider').outerWidth();
                this.longTouch = false;
                var self  = this;
                setTimeout(function() {
                    self.longTouch = true;
                }, 250);
                this.touchstartx = event.originalEvent.touches[0].pageX;
            },
            
            move: function(event) {
                this.touchmovex = event.originalEvent.touches[0].pageX;
                this.movex = this.index *this.slideWidth + (this.touchstartx - this.touchmovex);
            },
            end: function(event) {
                event.stopImmediatePropagation();
                var absMove = Math.abs(this.index*this.slideWidth - this.movex);
                if(absMove > this.slideWidth/3 || this.longTouch === false) {
                    if(this.movex > this.index * this.slideWidth && this.index < 3) {
                        this.index++;    
                    } else if (this.movex < this.index*this.slideWidth && this.index > 0) {
                        this.index--;
                    }
                }
                var new_position = this.index * this.slideWidth;
                this.handle_nav_click(event, parseInt(this.index));
            },  
            
            // I messed up this position / elem and check to make sure I the data comes through right
            handle_nav_click: function(event, position) {
                event.stopImmediatePropagation();
                event.preventDefault();
                
                this.index = this.is_integer(position) ? position : $(position).data('nav').split('-').pop(); 
                var slide_position = this.index * this.slideWidth;
                // console.log('width : '+this.slideWidth);
                // console.log('new position: '+slide_position);
                console.log('moving to the right')
                this.el.holder.animate({
                    'right': slide_position + 'px'
                }, 100);
                this.change_active_nav();
            },
            is_integer: function(num) {
                return (num ^ 0) === num;
            },
            
            change_active_nav: function() {
                this.el.all_nav_buttons.removeClass('active').html(this.circle);
                this.el.all_nav_buttons.eq(this.index).addClass('active').html(this.active_circle);
                this.el.title_navigation.removeClass('active');
                this.el.title_navigation.eq(this.index).addClass('active');
            }
        }
        slider.init();
    }
});