sample to build slider with featured image with slippry

slippry-slider-sample.php

<?php
/**
 * The following code is a copy of the code I recently used on the site of a client
 * It uses the Aqua-Resizer script (https://github.com/syamilmj/Aqua-Resizer) to 
 * dynamically resize the slider images to the size needed.
 * 
 * @source Piet Bos http://senlinonline.com
 */

echo '<div class="slider-wrapper">';

$slide_cat = 2; // this is the ID of the category that we use to pull images for the slider from 

$order = 'DESC';

$args = array(
	'post_type' => 'post',
	'posts_per_page' => 4,
	'cat' => $slide_cat,
	'order' => $order
);

$slider_query = new WP_Query( $args );

if ( $slider_query->have_posts() ) {
	
	echo '<ul id="homepage-slider">';

	while ( $slider_query->have_posts() ) { $slider_query->the_post();

		$feat_img = get_post_thumbnail_id();
		$img_url = wp_get_attachment_url( $feat_img,'full' ); //get full URL to image (use "large" or "medium" if the images are too big)
		$slide_img = aq_resize( $img_url, 640, 425, true ); //resize & crop the image
		
		printf( '<li title="<h3>%1$s</h3><p>%2$s</p>%3$s"><a title="%1$s" href="%4$s"><img src="%5$s" width="640" height="425" /></a></li>',
			esc_attr( get_the_title() ),
			esc_attr( get_the_excerpt() ),
			esc_attr( sprintf( '<a class="more" href="%s">' . __( 'Read More', 'textdomain' ) . '</a>', esc_url( get_permalink() ) ) ),
			esc_url( get_permalink() ),
			$slide_img
		);

	} //endwhile

	echo '</ul>';
	
} //endif

wp_reset_query();

echo '</div>'; // end .slider-wrapper

?>

<script type="text/javascript">
/* More Settings via http://slippry.com/settings/ */
jQuery('#homepage-slider').slippry({
  // general elements & wrapper
  slippryWrapper: '<div class="sy-box hp-slider" />', // wrapper to wrap everything, including pager

  // options
  adaptiveHeight: false, // height of the sliders adapts to current slide
  
  start: 1, // num (starting from 1), random
  loop: true, // first -> last & last -> first arrows
  captionsSrc: 'li',
  captions: 'below', // Position: overlay, below, custom, false
  captionsEl: '.external-caption',

  // transitions
  transition: 'horizontal', // fade, horizontal, kenburns, false
  easing: 'linear', // easing to use in the animation [(see... [jquery www])]
  continuous: true,
  controls: false,

  // slideshow
  auto: true,
  autoDelay: 5000,
  
  // direction
  autoDirection: 'next'  
  
});
</script>