Question

The problem

I’ve added a jQuery content slider (Coda Slider 2.0) to my WordPress template page but it breaks (only the text “loading” appears).

Demos

I’ve provided live examples here to see my code in action:

Broken slider | Working Slider

What I’ve tried

I’ve tried substituting the dollar sign for “jQuery” in my templates head but to no avail.

<!--Slider-->
<!-- Begin Stylesheets -->
    <!--<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/stylesheets/reset.css" type="text/css" media="screen" />-->
            <!--Commented out because it's already called previously.-->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/stylesheets/coda-slider-2.0.css" type="text/css" media="screen" />
<!-- End Stylesheets -->

<!-- Begin JavaScript -->
    <!--<script type="text/javascript" src="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/javascripts/jquery-1.3.2.min.js"></script>-->
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/javascripts/jquery.coda-slider-2.0.js"></script>
    <script type="text/javascript">
        jQuery().ready(function() {
            jQuery('#coda-slider-1').codaSlider(
            {autoSlide: true, 
            autoHeight: false, 
            autoSlideStopWhenClicked: true, 
            autoSlideInterval:4000,
            dynamicArrows: false,
            dynamicTabs: false}
            );
        });
     </script>
<!-- End JavaScript -->

I would greatly appreciate any help.

Answer 1

Use Firebug with Firefox, or in Chrome or Safari or IE8, use the developer tools to check for JS errors on demo that doesn’t work. Right now, the JS easing library isn’t loading because of a 404.