basic jquery slider TypeError: $ is not a function on WordPress

2 Views

I am getting this error: “TypeError: $ is not a function $(‘#slider’).list({“ 

        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://plumbsimple.com/wp-content/themes/bootstrapwp-87/js/basic-jquery-slider.min.js"></script>

         <script type="text/javascript">
              window.$ = jQuery;

              $(document).ready(function() {

                $('#slider').list({
                  'animation' : 'slide',
                  'width' : 700,
                  'height' : 300
                });

              });
        </script>

Data in header:

        <div id="slider"><ul class="list">
        <li><img src="<?php bloginfo( 'template_url' );?>/img/beach.jpg"></li>
        <li><img src="<?php bloginfo( 'template_url' );?>/img/hp-computers.jpg"></li>
        </ul>
        </div>
Post Views: 2

Related posts

Leave a Reply

3 comments

  1. There are 2 variants:

    1. You have not loaded jQuery library.
    2. It is not available by $ function because of prototype.js or something, then try to use jQuery function instead of $.

  2. WP by default puts jQuery in noConflict mode: (source)

    Which can be easily tested on the console:

    enter image description here

    So, if you don’t use any other library that could conflict with jQuery’s $, you can re-alias jQuery to $:

    window.$ = jQuery;

    Put that line at the very beginning of your first script after the jQuery library and it will work fine.

    Also, you can just replace all $ references with jQuery or use use a different alias in case you’d have a conflict with prototype or another library.

    edit: There’s something in fact overwriting your global $ as well. You can wrap your code in an IIFE to create a scope where you can safely use the $ alias:

    (function($) {
    $(document).ready(function() {

        $('#slider').list({
            'animation': 'slide',
            'width': 700,
            'height': 300
        });

    });
})(jQuery);​