Cycle plugin defaults.

cycle.css

ul.slideshow,
ul.slideshow li {
	height: 300px;
	width: 450px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	}
.slideshow { position: relative; }
	.slideshow li {
		list-style: none;
		background: none;
		}

cycle.html

<script src="/_infrastructure/JavaScript/jquery.cycle.pack.js"></script>
<script src="/_infrastructure/JavaScript/jquery.touchwipe.min.js" ></script>

<ul class="slideshow">
	<li><img src="http://fakeimg.pl/450x300/ff69b4/ffc0cb/?text=Slide Uno" /></li>
	<li><img src="http://fakeimg.pl/450x300/1e90ff/cae1ff/?text=Slide Dos" /></li>
	<li><img src="http://fakeimg.pl/450x300/ff6103/ffdab9/?text=Slide Tres" /></li>
	<li><img src="http://fakeimg.pl/450x300/00cd66/bdfcc9/?text=Slide Cuatro" /></li>
</ul>

cycle.js

$(document).ready(function(){

	// Slideshow
	$('.slideshow')
	.before('<div class="cycle-pager pager">')
	.after('<div class="controls"><a href="#" class="prev">prev</a><a href="#" class="next">next</a></div>')
	.cycle({
		fx: 'scrollHorz',//fade
		speed: 1000,
		timeout: 8000,
		pause: 1,
		pager: '.cycle-pager',
		cleartype: true,
		cleartypeNoBg: true,
		activePagerClass: 'active',
		next: '.next', 
		prev: '.prev'
	});

	// Slideshow Touch Gestures
	$('.slideshow').swipe({
		swipeLeft: function(){
			$('.slideshow').cycle('next');
		},
		swipeRight: function(){
			$('.slideshow').cycle('prev');
		},
		preventDefaultEvents: false
	});

});

$(document).bind('keydown', function(e) {
	if (e.keyCode == 37)
		$('.slideshow').cycle('prev');
	else if (e.keyCode == 39)
		$('.slideshow').cycle('next');
});