// ==== @ HEADER.PHP ====

<!-- Begin JavaScript -->
		<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.coda-slider-2.0.js"></script>
		  
	<!-- End JavaScript -->
<script type="text/javascript">
    $().ready(function() {
        $('#coda-slider-1').codaSlider({
            dynamicTabs: false,
            dynamicArrows: false
        });
    });
 </script>
 
 // I also tried
 <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#coda-slider-1').codaSlider({
            dynamicTabs: false,
            dynamicArrows: false
        });
    });
 </script>
 

// === @ INDEX.PHP ====/


<div class="coda-slider-wrapper">
   <div class="coda-slider preload" id="coda-slider-1">
    <?php
    $postcount = 0;
    $slider_query = new WP_Query('posts_per_page=3');
    while ($slider_query->have_posts()) : $slider_query->the_post();
        $do_not_duplicate[] = get_the_ID();
        $postcount++;
	?>
	<div class="panel">
		<div class="panel-wrapper">
			<?php if (has_post_thumbnail()) {the_post_thumbnail('slider_img');} ?>
			<h2 class="title"><?php the_title(); ?></h2>
			<?php the_content(); ?>
		</div>
	</div>
	<?php endwhile; ?>
   </div><!-- .coda-slider -->
   <div id="coda-nav-1" class="coda-nav">
    <ul>
    <?php
        $postcount = 0;
        $slider_query = new WP_Query('posts_per_page=3');
        while ($slider_query->have_posts()) : $slider_query->the_post();
            $do_not_duplicate[] = get_the_ID();
            $postcount++;
    ?>
    <li class="tab<?php echo $postcount; ?>">
        <a href="#<?php echo $postcount; ?>">
            <?php if (has_post_thumbnail()) {the_post_thumbnail('slider_nav_img');} ?>
        </a>
    </li>
    <?php endwhile; ?>
	</ul>
	</div>
</div><!-- .coda-slider-wrapper -->

// === @ STYLE.CSS === //


.coda-slider, .coda-slider .panel { width: 620px } 
 
.coda-slider p.loading { padding: 20px; text-align: center }
 
.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
.coda-nav ul li { display: inline }
.coda-nav ul li a {  display: block; float: left;  }
 
.coda-slider-wrapper { clear: both; overflow: auto }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { float: left }
.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }