halil-İ of Optimus
12/21/2017 - 10:35 PM

Swiper Native Script

Swiper Native Script

var swiper = {
    xDown: null,                                                        
    yDown: null,
    element: null,

    init: function(){
        if(swiper.element === null){
            document.addEventListener('touchstart', swiper.handleTouchStart, false);        
            document.addEventListener('touchmove', swiper.handleTouchMove, false);
        }else{
            document.querySelector(swiper.element).addEventListener('touchstart', swiper.handleTouchStart, false);        
            document.querySelector(swiper.element).addEventListener('touchmove', swiper.handleTouchMove, false);
        }
    },                                                    

    handleTouchStart: function(evt) {                                         
        swiper.xDown = evt.touches[0].clientX;                                      
        swiper.yDown = evt.touches[0].clientY;                                      
    },                                              

    handleTouchMove: function(evt) {
        if ( ! swiper.xDown || ! swiper.yDown ) {
            return;
        }

        var xUp = evt.touches[0].clientX;                                    
        var yUp = evt.touches[0].clientY;

        var xDiff = swiper.xDown - xUp;
        var yDiff = swiper.yDown - yUp;

        if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
            if ( xDiff > 0 ) {
                swiper.rightSwipe();
            } else {
                swiper.leftSwipe();
            }                       
        } else {
            if ( yDiff > 0 ) {
                swiper.downSwipe();
            } else { 
                swiper.upSwiper();
            }                                                                 
        }

        swiper.xDown = null;
        swiper.yDown = null;                                             
    },

    rightSwipe: function(){
        console.log('sag');
    },

    leftSwipe: function(){
        console.log('sol');
    },

    downSwipe: function(){
        console.log('asagi');
    },

    upSwiper: function(){
        console.log('yukari');
    }
};