360 degree image slider -

custom_360.js

// Code goes here
$(document).ready(function() {
    var posX = 0, //current X
        posY = 0, //current Y
      	mDown = false, //mousedown status
      	
    //Thanks Robert Pataki and sorry, I used the images without your permission
    image = 'http://heartcode.robertpataki.com/360-image-slider/img/threesixty',
    maxImages = 180, //total number of images for the object. You can count the number or send it from your server
    currentImage = 1; //default image when page loads

    //Bind a mousedown handler to the target element, the slider container
    $('div').on('mousedown', function(e) {
    	//The mouse button is held down
    	mDown = true;
    	
    	//Calculate the current X and Y positions
    	posX = e.pageX - $(this).parent().offset().left;
    	posY = e.pageY - $(this).offset().top;
    	
    	//Bind the mousemove handler
    	//This should be done from here or mousemove will work only once
    	$('div').on('mousemove', moveHandler);
    });

    //Mousemove handler
    var moveHandler = function(e) {
        //Do not handle unless mouse not pressed down
	if (!mDown) {
	    return;
	}

	//New cursor positions
	var newX = e.pageX - $(this).parent().offset().left,
	    newY = e.pageY - $(this).offset().top;
	
	//For smooth transition, calculate the number of pixels to wait for changing the image
	wait = maxImages / $(this).width();
	
	//Difference between old and new positions
	diffX = Math.abs(newX - posX);
	diffY = Math.abs(newY - posY);
	
	//Consider movement only when the difference is more than 10
	if( diffX >= wait ) {
	    if(newX < posX) {
	        console.log('Moving left');
	        posX = newX;
	        currentImage = currentImage - 1;
	        if(currentImage <= 0) {
	            currentImage = maxImages;
	        }
	    }
	    
	    if(newX > posX) {
	        console.log('Moving right');
	        posX = newX;
	        
	        currentImage = currentImage + 1;
	        if(currentImage > maxImages) {
	            currentImage = 1;
	        }
	    }
	
	    //Update the image background
	    //You can even use an img tag and update the src
	    $(this).css('background-image', 'url(' + image + '_' + currentImage + '.jpg)');
	}
	
	//For vertical 360. I don't have the images so commented out.
	/*if( diffY >= 10 ) {
	    if( newY < posY ) {
	        console.log('Moving up');
	        posY = newY;
	    }
	
	    if( newY > posY ) {
	        console.log('Moving down');
	        posY = newY;
	    }
        }*/
    };

    //Mouse up handler
    $('div').on('mouseup', function(e) {
    	//Stop handling mousemove
    	$(this).off('mousemove');
    	mDown = false;
    });
});