Touch Scrollable Image Area WP Widget

touch_scrollable_function.css

/* set default styles for draggable area */
.drag-mask {
	float: left;
	width: 100%;
	height: 120px;
	overflow: hidden;
}
.drag-container {
	width: 2000px;
}
.draggable {
	position: relative;
	width: 2000px;
	margin-left: -1000px;
	height: 110px;
}
.drag-slides {
	position: absolute;
	width: 100%;
	z-index: -1;

	img {
		padding: 0 10px;
	}
}

touch_scrollable_function.html

Add this to your wp content:

[slider-bar posts='100' category='1']

touch_scrollable_function.js

// add scrolling functionality
// requires jQuery UI and jQuery Touch Punch:
// http://jqueryui.com/
// http://touchpunch.furf.com/

$(window).load(function() {
	var contain = $('.drag-container');
	var mask = $('.drag-mask')
	var drag = $('.draggable');
	var clicked = false;

	//implement dragging
	try {
		drag.draggable({
			axis: 'x',
			containment: '.drag-container'
		});
	} catch (e) {
		return false;
	}
	
	//set the size of the content
	var imgWidth = null;
	var screenWidth = mask.width();

	drag.find('img').each(function(){
		imgWidth += ($(this).width() + (parseInt($(this).css('margin-right')) * 2) + 15);
		contain.width(imgWidth + screenWidth);
		drag.width(imgWidth + screenWidth);
		drag.css('margin-left',(imgWidth * -1 + screenWidth - 100));
		drag.css('left',imgWidth - screenWidth);
	});
	
	$(window).resize(function(){
		screenWidth = mask.width();
		drag.css({
			'margin-left':(imgWidth * -1 + screenWidth - 100),
			'left': (imgWidth - screenWidth)
		});
	});

});

touch_scrollable_function.php

// add this to your functions.php file

/*
* Show slider bar.
*/
function slider_bar_function($atts){
	extract(shortcode_atts(array(
		'posts' => 100,
		'category' => 1
	), $atts));

	global $post;
	$images =  null;
	$args = array( 'numberposts' => $posts, 'category' => $category );
	$myposts = get_posts( $args );
	foreach( $myposts as $post ) {
		setup_postdata($post);
		$images .= get_the_post_thumbnail($post->ID);
	}

	$return_string = '
	<div class="drag-mask inset col12">
		<div class="drag-container">
			<div class="draggable">
				<div class="drag-slides">
					' . $images . '
				</div>
			</div>
		</div>
	</div>';
   return $return_string;
}
add_shortcode('slider-bar', 'slider_bar_function');