/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>dualSlider</title>

    <meta name="description" id="MetaDescription" content="" />
    <meta name="keywords" id="MetaKeywords" content="" />

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<meta name="language" content="en" />

	<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" media="all" href="css/clearfix.css" />
	<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
	<link rel="stylesheet" type="text/css" media="all" href="css/fonts.css"  />
	<link rel="stylesheet" type="text/css" media="all" href="css/jquery.dualSlider.0.2.css" />

	<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="scripts/jquery.timers-1.2.js" type="text/javascript"></script>
	<script src="scripts/jquery.dualSlider.0.3.min.js" type="text/javascript"></script>


	<script type="text/javascript">

		$(document).ready(function() {

			$(".carousel").dualSlider({
				auto:true,
				autoDelay: 6000,
				easingCarousel: "swing",
				easingDetails: "easeOutBack",
				durationCarousel: 1000,
				durationDetails: 600
			});

		});


	</script>


</head>

<body>

	<div class="wrapper clearfix">


		<!-- begin the featured dual slider query -->

		<?php query_posts(array(

			'tag' => 'Featured',	// Retrieve Posts with Tag Featured...

			'order' => 'DESC',	// Ordering by latest first...

			'orderby' => 'date',	// This is what the above is using to order by...

			'posts_per_page' => 3	// Display 3 posts...

		 ) ); ?>

		<div class="carousel clearfix">

			<div class="panel">

				<div class="details_wrapper">

					<div class="details">

						<!-- This is the first loop which pulls in the info from your post -->

						<?php if ( have_posts()) : while (have_posts()) : the_post(); ?>

						<div class="detail">
							<h2 class="Lexia-Bold"><a href="<?php the_permalink() ?>" ><?php the_title(); ?></h2>
							<p><?php the_excerpt(); ?></p>
							<a href="<?php the_permalink() ?>" title="Read more" class="more">Read more</a>
						</div><!-- /detail -->

						<?php endwhile; ?>

					</div><!-- /details -->

				</div><!-- /details_wrapper -->

				<div class="paging">
					<div id="numbers"></div>
					<a href="javascript:void(0);" class="previous" title="Previous" >Previous</a>
					<a href="javascript:void(0);" class="next" title="Next">Next</a>
				</div><!-- /paging -->

				<a href="javascript:void(0);" class="play" title="Turn on autoplay">Play</a>
				<a href="javascript:void(0);" class="pause" title="Turn off autoplay">Pause</a>

			</div><!-- /panel -->


			<!-- This should technically allow you to run a secondary loop in the same query I think... http://www.catswhocode.com/blog/multiple-wordpress-loops -->

			<?php rewind_posts(); ?>


			<div class="backgrounds">

				<!-- This is the second loop which pulls in your featured image or your video embed code via a custom field -->

				<?php if ( have_posts()) : while (have_posts()) : the_post(); ?>

				<div class="item item_1">

					<?php if ( get_post_meta($post->ID, 'Slider Featured Image', true) ) { ?>

						<?php echo get_post_meta($post->ID, 'Slider Featured Image', true); ?>

					<?php } else { ?>

						<img src="<?php bloginfo('template_url'); ?>/images/no-image-available.jpg" alt="No Image" />

					<?php } ?>

				</div><!-- /item -->

				<?php endwhile; ?>

			</div><!-- /backgrounds -->

		</div><!-- /carousel -->


		<!-- finish the query -->

 		<?php wp_reset_query(); ?>


	</div><!-- /wrapper -->

</body>

</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>dualSlider</title>

	<meta name="description" id="MetaDescription" content="" />
	<meta name="keywords" id="MetaKeywords" content="" />

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<meta name="language" content="en" />

	<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" media="all" href="css/clearfix.css" />
	<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
	<link rel="stylesheet" type="text/css" media="all" href="css/fonts.css" />
	<link rel="stylesheet" type="text/css" media="all" href="css/jquery.dualSlider.0.2.css" />

	<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="scripts/jquery.timers-1.2.js" type="text/javascript"></script>
	<script src="scripts/jquery.dualSlider.0.3.min.js" type="text/javascript"></script>


	<script type="text/javascript">

	$(document).ready(function() {

	$(".carousel").dualSlider({
	auto:true,
	autoDelay: 6000,
	easingCarousel: "swing",
	easingDetails: "easeOutBack",
	durationCarousel: 1000,
	durationDetails: 600
	});

	});


	</script>


	</head>

	<body>

	<div class="wrapper clearfix">








	<!-- begin the featured dual slider query -->

	<?php query_posts(array(

	'tag' => 'Featured', // Retrieve Posts with Tag Featured...

	'order' => 'DESC', // Ordering by latest first...

	'orderby' => 'date', // This is what the above is using to order by...

	'posts_per_page' => 3 // Display 3 posts...

	) ); ?>

	<div class="carousel clearfix">

	<div class="panel">

	<div class="details_wrapper">

	<div class="details">

	<!-- This is the first loop which pulls in the info from your post -->

	<?php if ( have_posts()) : while (have_posts()) : the_post(); ?>

	<div class="detail">
	<h2 class="Lexia-Bold"><a href="<?php the_permalink() ?>" ><?php the_title(); ?></h2>
	<p><?php the_excerpt(); ?></p>
	<a href="<?php the_permalink() ?>" title="Read more" class="more">Read more</a>
	</div><!-- /detail -->

	<?php endwhile; ?>

	</div><!-- /details -->

	</div><!-- /details_wrapper -->

	<div class="paging">
	<div id="numbers"></div>
	<a href="javascript:void(0);" class="previous" title="Previous" >Previous</a>
	<a href="javascript:void(0);" class="next" title="Next">Next</a>
	</div><!-- /paging -->

	<a href="javascript:void(0);" class="play" title="Turn on autoplay">Play</a>
	<a href="javascript:void(0);" class="pause" title="Turn off autoplay">Pause</a>

	</div><!-- /panel -->




	<!-- This should technically allow you to run a secondary loop in the same query I think... http://www.catswhocode.com/blog/multiple-wordpress-loops -->

	<?php rewind_posts(); ?>




	<div class="backgrounds">

	<!-- This is the second loop which pulls in your featured image or your video embed code via a custom field -->

	<?php if ( have_posts()) : while (have_posts()) : the_post(); ?>

	<div class="item item_1">

	<?php if ( get_post_meta($post->ID, 'Slider Featured Image', true) ) { ?>

	<?php echo get_post_meta($post->ID, 'Slider Featured Image', true); ?>

	<?php } else { ?>

	<img src="<?php bloginfo('template_url'); ?>/images/no-image-available.jpg" alt="No Image" />

	<?php } ?>

	</div><!-- /item -->

	<?php endwhile; ?>

	</div><!-- /backgrounds -->

	</div><!-- /carousel -->


	<!-- finish the query -->

	<?php wp_reset_query(); ?>









	</div><!-- /wrapper -->

	</body>

	</html>