BxSlider article

bxslider-display.php

<ul id="bxslider">
		<?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
		<!--Each post is wrapped in List item..	-->
		<li>
			<div class="thumbnail">
				<?php
				if(has_post_thumbnail()) { ?>
				<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_post_thumbnail( 'thumbnail');?></a> <!-- Image links to Post -->
				<?php } else { ?>
					<div class="no-thumb"><h2>No thumbnail for this :D</h2><h3>wrapcode</h3></div>
				<?php }
				?>
			</div>
			<div class="content">
				<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
					<h2>
						<?php the_title(); ?>  <!-- The Title -->
					</h2>
				</a>
				<p>
				<?php
                                   the_excerpt();
				?>
				</p>
		</div>
		</li> <!-- END OF LIST ITEM -->
		<?php endwhile; endif;?>
		<?php wp_reset_query();?>
</ul>

bxslider-loadjquery.php

function load_jquery() {
	if (!is_admin()) {
	wp_enqueue_script('jquery');
	}
}
add_action('init', 'load_jquery');

bxslider-loop.php

//Start of the loop
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	//THE CODE GOES HERE
<?php endwhile; else: ?>
	<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?> //End of the Loop

bxslider.php

function bxslider{
	wp_register_script('bxslider', get_bloginfo('template_directory').'/js/jquery.bxSlider.min.js');
	wp_enqueue_script('bxslider');
        wp_register_script('easing', get_bloginfo('template_directory').'/js/ jquery.easing.1.3.js ');
	wp_enqueue_script('easing');
	wp_register_style('bxslider-style', get_bloginfo('template_directory').'/css/bx_styles.css');
	wp_enqueue_style('bxslider-style');
}
add_action('init', 'bxslider');

init-slider.js

<script type=”text/javascript”>
	jQuery(document).ready(function(){
		jQuery(‘#bxslider’).bxSlider({
			easing: ‘swing’,
			auto:true,
			pause:5000,
		});
	});
</script>

slider.html

<ul id="slider1">
	<li>Slide one content</li>
	<li>Slide two content</li>
	<li>Slide three content</li>
	<li>And so on...</li>
</ul>

slider2.html

<div id="slider1">
  <div>Slide one content</div>
  <div>Slide two content</div>
  <div>Slide three content</div>
  <div>And so on...</div>
</div>

wordpress-slider.css

#slider{
	width:624px; /*defines width*/
	/*any other styling such as background, border, shadow etc. */
}

.thumbnail{
	float:left;
	width:265px;
	height:170px;
	border-radius:5px;
	overflow:hidden;
}

.content{
	float:right;
	/*Other properties of your choice*/
}

.content h2{
	font-size:20px;
	line-height:28px;
	/*Other properties of your choice*/
}

.content p{
	font-size:12px;
	line-height:20px;
	/*Other properties of your choice*/
}