In my previous blog post, I provided a step by step tutorial on how to build a custom image slider into your WordPress. This was achieve by using Nathan’s awesome slideshow plugin. Digging a bit deeper in his code and website, I discovered that he’s also included fade in fade out transition.

If you’ve downloaded the material, took a stab at the tutorial and wish to use this transition effect instead of a slider action, all you need to do is replace the jQuery function in your header with the following:

<script>
 jQuery(document).ready(function($){
	$('#slides').slides({
	preload: true,
	preloadImage: 'http://yourthemepath.com/images/loading.gif',
	effect: 'fade',
	play:5000,
	crossfade: true,
	fadeSpeed: 500,
	generatePagination: false
   });
 });
</script>

You also no longer need the next and previous arrows.