質問編集履歴

1 コードを追加する

rettmb125 score 8

2018/01/24 15:59  投稿

hammer.jsの使い方について

WordPressを使ってサイトを製作しています。

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

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

```javascript

jQuery.noConflict();

(function($) {

var duringAnimation = false;//アニメーション中のロック用フラグ

var mc = new Hammer(document.getElementById("swiper"));　**エラー部分**

mc.on("pan", function(e){

var viewItem = $(e.target).closest(".view-mode");

var positions = $(".position > li");

var index = $(viewItem).index();

var length = $(".view-mode").length;

var nextItem;

var nextIndex;

var direction;

var range = 60;//判定する角度

var easing = 'ease';

if (e.distance < 70) return true;

//範囲外だったら処理しない。

if ( !(e.angle > -180 - range && e.angle < -180 + range) && !(e.angle < range && e.angle > -range)){

return true;

}

//方向

direction = (e.additionalEvent === "panleft") ? "left":"right";

var step = (direction === "left") ? 1:-1;

nextIndex = index + step;

if (nextIndex > length-1)

{

nextIndex = 0;

}else if (nextIndex < 0){

nextIndex = length-1;

}

nextItem = $(".view-mode")[nextIndex];

$(positions).removeClass("active");

$(positions[nextIndex]).addClass("active");

//$("#position ul").animate({left: 0}, 100, "easeOutExpo");

$(window).scrollTop(0);

if (duringAnimation === false) {

duringAnimation = true;

$(nextItem).css({"left":"100%", "display":"block"}).transition({left: "0"}, 300, easing);

$(viewItem).transition({left: (direction === "left") ? "-100%":"100%" }, 300, easing,function () {

$(viewItem).css({"position": "absolute", "display": "none"});

$(nextItem).css({"margin-top": "0", "position": "relative", "display": "block"});

duringAnimation = false;

});

}

});

})(jQuery);　**エラー部分**

```

すると『Uncaught ReferenceError: Hammer is not defined』という内容のエラーが出ます。

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

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

JavaScript 30438 questions JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。 Myタグに追加 WordPress 12865 questions WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。 Myタグに追加