hammer.jsの使い方について

WordPressを使ってサイトを製作しています。
横フリックでタブの切り替えができる機能をつけているのですが、縦スクロールの動作と混同してしまって気持ちの悪い動作になってしまっています。

そこで、下記の記事を見つけてhammer.jsを使おうと考えております。（https://qiita.com/coa00@github/items/dc1aa5fedd8e4ed8b1ff#%E3%82%B3%E3%83%BC%E3%83%89）

hammer.jsをサーバーにアップロードして<script>タグでファイルを読み込んだ後に、utility.jsという別ファイルに下のコードを書きました。

javascript
1
2jQuery.noConflict();
3(function($) {
4
5    var duringAnimation = false;//アニメーション中のロック用フラグ
6    var mc = new Hammer(document.getElementById("swiper"));　**エラー部分**
7
8    mc.on("pan", function(e){
9        var viewItem = $(e.target).closest(".view-mode");
10        var positions = $(".position > li");
11        var index = $(viewItem).index();
12        var length = $(".view-mode").length;
13        var nextItem;
14
15        var nextIndex;
16        var direction;
17        var range = 60;//判定する角度
18        var easing = 'ease';
19
20        if (e.distance < 70) return true;
21
22                //範囲外だったら処理しない。
23        if ( !(e.angle > -180 - range && e.angle < -180 + range) && !(e.angle < range && e.angle > -range)){
24            return true;
25        }
26
27                //方向
28        direction = (e.additionalEvent === "panleft") ? "left":"right";
29
30        var step = (direction === "left") ? 1:-1;
31        nextIndex = index + step;
32
33        if (nextIndex > length-1)
34        {
35            nextIndex = 0;
36        }else if (nextIndex < 0){
37            nextIndex = length-1;
38        }
39
40        nextItem = $(".view-mode")[nextIndex];
41
42
43        $(positions).removeClass("active");
44        $(positions[nextIndex]).addClass("active");
45
46        //$("#position ul").animate({left: 0}, 100, "easeOutExpo");
47        $(window).scrollTop(0);
48
49        if (duringAnimation === false) {
50            duringAnimation = true;
51            $(nextItem).css({"left":"100%", "display":"block"}).transition({left: "0"}, 300, easing);
52            $(viewItem).transition({left: (direction === "left") ? "-100%":"100%" }, 300, easing,function () {
53                $(viewItem).css({"position": "absolute", "display": "none"});
54                $(nextItem).css({"margin-top": "0", "position": "relative", "display": "block"});
55                duringAnimation = false;
56            });
57        }
58    });
59
60})(jQuery);　**エラー部分**
61

すると『Uncaught ReferenceError: Hammer is not defined』という内容のエラーが出ます。
エラーが出ている場所は、5行目の『var mc = new Hammer(document.getElementById('swiper'));』と、最後の行の『})(jQuery);』の部分です。

原因が分からなくて困っているのですが、どなたか原因や解決策に心当たりのある方はいらっしゃらないでしょうか。