Integrating the AnythingSlider with WordPress

You may have noticed a nice content slider on the new homepage for Brackish Waters Design.  This was implemented using Chris Coyier’s AnythingSlider which I have found to be very useful in the past few months.  Its ability to handle multiple types of data and slide smoothly with JQuery was a definite plus.  It took a bit of work but I was able to get the slider to grab 6 of latest posts to a specific category and automatically display these in the panes.

I run a separate include file for my home loop in WordPress which I will provide here but I will dump a bunch of the actions that you would not have.

        <div id="slideshow">
            <ul id="slider1">
 		<?php if (have_posts()) : ?>
         	<?php $recent = new WP_Query("cat=11&showposts=6"); 
			while($recent->have_posts()) : $recent->the_post();?>
                <li>    
                    <article class="article">
                        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	                            <div class="entry-content">
    	                            <?php the_excerpt(); ?>
	                            </div>
                        </div>
                    </article>
	        </li>				
		<?php endwhile; ?>
            <?php endif; ?>
	</ul> 
        </div>

The javascript that contains the data to populate the panels is also located within this home-loop.php and is at the end of the file after the loop has closed.

<script type="text/javascript">
	$('#slider1').anythingSlider({
		navigationFormatter: function (i, panel) {
			return [
			<?php $recent = new WP_Query("cat=11&showposts=6"); 
				while($recent->have_posts()) : $recent->the_post();?>
			'<?php the_title(); ?>',
			<?php endwhile; ?>
			][i-1]
		},
		startStopped    : false,
		autoPlayLocked  : true,
		delay 			: 5000, 
		resumeDelay     : 10000
	});
});
</script>

Its the specificity in the WP_Query that denotes what category you are using for the posts and how many panels you are showing. You still need to include the usual javascript for the slider such as jquery 1.6 and the slider.js from Chris’s site.