I've implemented the JQuery touchSwipe plugin as a content swiper (using image placeholders for now) and it works perfectly. As I wanted this to be a prototype I also have a header navigation as an image that should slide left/right when the content is swiped left/right. It should basically function like how this Google Docs one does so when you slide content it slides the menu accordingly.



Here's my CSS, HTML and JS (including my attempt). My attempt doesn't work because I'm setting the value outside the left/right function and when I set it within it just doesn't work. The header needs to slide 509px left when swiping left and back to its start position when swiping right. How can I adjust the JS below to do this within the plugin functions?

Code:
    		#second {
    		    position:absolute;
    		    left:1024px;
    		    width:2048px;
    		    height:768px;
    		    background-color: #f3f0ef;
    		    
    		}
    		
    		.sliding_content {
    			
    		}
    		
    		.sliding_head {
    			position: absolute;
    			top: 119px;
    			left: 140px;
    		}
    		
    		.sliding_2 {
    			position: absolute;
    			left: 1024px;
    		}
    		
    		.imgs img{
    			float: left;
    		}


HTML

Code:
<div id="second">
    		            <img class="notes" src="img/2-top.jpg" />
    			         <img src="img/2-top-2.jpg" />
    			         <img src="img/2-middle.jpg" />
    			         	<div class="sliding_content">
    			         		<img class="sliding_head" src="img/2-sliding_head.png" /> <!-- this is the header image that needs to slide 509px left when swiping left and back to its start position when swiping right -->
    			         		
    			         		<div class="galleryTouch">
    							  <div class="imgs">
    							    <img src="img/2-sliding_1.png">
    							    <img src="img/2-sliding_2.png">
    							  </div>
    							</div>
    			         	</div>
    		        </div>
ATTEMPTED JS FOR THIS (MY COMMENTS INLINE IN CAPS)

Code:
$(function() {
    		var IMG_WIDTH = 1024,
    		currentImg=0,
    		maxImages=2;
    		speed=500,
    		imgs = $(".imgs");
    		head = $(".sliding_head"); //ADDED VAR FOR ADDED SLIDING DIV


    
    		//Init touch swipe
    		imgs.swipe( {
    			triggerOnTouchEnd : true,
    			swipeStatus : swipeStatus,
    			allowPageScroll:"vertical"
    		});
    		
    
    		/**
    		* Catch each phase of the swipe.
    		* move : we drag the div.
    		* cancel : we animate back to where we were
    		* end : we animate to the next image
    		*/
    		function swipeStatus(event, phase, direction, distance, fingers)
    		{
    			//If we are moving before swipe, and we are going L or R, then manually drag the images
    			if( phase=="move" && (direction=="left" || direction=="right") )
    			{
    				var duration=0;
    
    				if (direction == "left") 
    					scrollImages((IMG_WIDTH * currentImg) + distance, duration);
    					//I'VE TRIED HERE
    				else if (direction == "right")
    					scrollImages((IMG_WIDTH * currentImg) - distance, duration);
    					//AND HERE BUT IT STOPS WORKING
    			}
    
    			//Else, cancel means snap back to the begining
    			else if ( phase == "cancel")
    			{
    				scrollImages(IMG_WIDTH * currentImg, speed);
    			}
    
    			//Else end means the swipe was completed, so move to the next image
    			else if ( phase =="end" )
    			{
    				if (direction == "right")
    					previousImage();
    				else if (direction == "left")
    					nextImage()
    			}
    		}
    
    		function previousImage()
    		{
    			currentImg = Math.max(currentImg-1, 0);
    			scrollImages( IMG_WIDTH * currentImg, speed);
    		}
    
    		function nextImage()
    		{
    			currentImg = Math.min(currentImg+1, maxImages-1);
    			scrollImages( IMG_WIDTH * currentImg, speed);
    		}
    
    		/**
    		 * Manually update the position of the imgs on drag
    		 */
    		function scrollImages(distance, duration)
    		{
    			imgs.css("-webkit-transition-duration", (duration/1000).toFixed(1) + "s");
    			//inverse the number we set in the css
    			var value = (distance<0 ? "" : "-") + Math.abs(distance).toString();
    			imgs.css("-webkit-transform", "translate3d("+value +"px,0px,0px)");
    			
    			//ADDED THIS IN MY LATEST ATTEMPT, IT JUST SLIDES TO NEW POSITION BUT NOT BACK
    			head.css("-webkit-transition-duration", (duration/500).toFixed(1) + "s"); //DO THIS ONE SLOWER
    			//MAKE 'VALUE' AN INT (WILL BE -1024) AND SET IN NEW VAR PLUS 509 LEFT TO POSITION CORRECTLY
    			var headval = parseInt(value)+509;
    			head.css("-webkit-transform", "translate3d("+headval +"px,0px,0px)");

    		}
    	});