Trying to add hammer.js and other libraries in head tag

Question

My header.php file looks like this, except when I try to use hammer.js it's not working. I'm getting errors with jquery.hammer.customswipe and events.js also.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery-scrollto.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/scripts/scripts.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/scripts/core/js/libraries/jquery.hammer.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/scripts/core/js/functions/jquery.hammer.customswipe.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/scripts/core/js/events.js"></script>

Errors:

jquery.hammer.js:8 Uncaught ReferenceError: Hammer is not defined
    at jquery.hammer.js:8
    at jquery.hammer.js:10
(anonymous) @ jquery.hammer.js:8
(anonymous) @ jquery.hammer.js:10
jquery.hammer.customswipe.js:123 Uncaught TypeError: options.containers.hammer is not a function
    at Object.move (jquery.hammer.customswipe.js:123)
    at Object.left (jquery.hammer.customswipe.js:42)
    at init (jquery.hammer.customswipe.js:157)
    at init.$.fn.customSwipe (jquery.hammer.customswipe.js:173)
    at events.js:2
    at events.js:10
move @ jquery.hammer.customswipe.js:123
left @ jquery.hammer.customswipe.js:42
init @ jquery.hammer.customswipe.js:157
$.fn.customSwipe @ jquery.hammer.customswipe.js:173
(anonymous) @ events.js:2
(anonymous) @ events.js:10

Answer 1

It'll be useful to show the errors you mentioned. However, that being said I would instead move to using wp_enqueue_script WordPress Enqueue Script . To load your files instead of directly adding them to the header.php file.

You may also have to move these files to load in the footer rather than the header. An example would be.

wp_enqueue_script( 'hammerJS', get_template_directory_uri() . '/scripts/core/js/libraries/jquery.hammer.customswipe.js', ['jquery'], false, true );

This will make sure jquery (the ['jquery'] parameter) is loaded before this script and place the script in the footer (the last parameter).

Try that and see if you get anywhere, but showing what errors you're getting will enable us to help much more.