UnoSlider (http://unoslider.npmedia.net/) + WordPress Slider Tutorial Code [Tutorial Coming Soon]

functions.php

<?php
/**
 * ENQUEUE SCRIPTS
 */
function add_new_scripts_method() {
  if ( is_page_template('page-with-slider.php') ) :
    wp_enqueue_script(
		  'unoslider',
		  get_template_directory_uri() . '/js/unoSlider-1.0.1.min.js',
		  array('jquery')
	  );
	endif;	
}   
add_action('wp_enqueue_scripts', 'add_new_scripts_method');
?>

initiate.js

jQuery(document).ready(function($){ 
if ( $('#slider ul li').length > 1 ) {
    $('#slider').unoSlider({
  		auto: false,
			next: '#slider-next',
			prev: '#slider-prev'
		});
	} else {
		$('#slider').unoSlider({
			auto: false
		});
		$('#slider-next, #slider-prev').hide();
	}
});

page-with-slider.php

<?php
//  full file coming soon...
?>

slider.php

<?php
  $images = get_field('slider_images');
  
  if( $images ): ?>
		<div id="slider">
			<ul>
				<?php foreach( $images as $image ): ?>
				  <li>
  				  <?php if ( $image['description'] != '' ) : ?>
					    <a href="<?php echo $image['description']; ?>">
					      <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
					    </a>
					  <?php else : ?>
					    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
					  <?php endif; ?>
					</li>
				<?php endforeach; ?>
			</ul>
			
      <a href="#" id="slider-prev">Previous</a>
			<a href="#" id="slider-next">Next</a>
		</div><!-- #slider -->
<?php endif; ?>

styles.css

/* Slider */
.unoSlider,.unoSlider ul,.unoSlider .sliderView {
  width:1000px;
}
.unoSlider ul,.unoSlider .sliderView {
	min-height:400px;
}
.unoSlider ul {
	list-style:none;
	margin: 0;
	padding: 0;
	overflow:hidden;
	position:relative;
}
.unoSlider .sliderView{left:1000px;opacity:0;position:absolute;top:0;z-index:1}
.unoSlider .sliderView.current{left:0;opacity:1;z-index:10}
#slider-next,
#slider-prev {
	width: 37px;
	height: 85px;
	display: inline-block;
	text-indent: -9999em;
	position: absolute;
	top: 150px;
	z-index: 10;
}
#slider-prev {
	background: url('images/slider-prev.png') no-repeat;
	left: 10px;
}
#slider-next {
	background: url('images/slider-next.png') no-repeat;
	right: 10px;
}

This looks interesting. Did you ever write the tutorial?

@decodigo I did not, still in my drafts folder. Also I guess I don't get comment notifications from Gists...

Actually apparently NOBODY gets comment notifications for Gists: isaacs/github#21