monacaでアプリを作りたいと思い色々な動作をさせているのですが、スワイプ操作ができません。
コードに何か間違いなどありましたらお教え頂けると助かります。

よろしくお願いいたします。

※ヘッダーとボディを記載するとコードがおかしくなったため省きました

index.html

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script src="components/monaca-jquery/jquery.mobile.js"></script>

<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">

<script>
    ons.ready(function() {
        /* 前ページにスワイプ */
        $(document).on('swiperight', '.center', function(event) { });

        /* 次ページにスワイプ */
        $(document).on('swipeleft', '.center', function(event) {
          mynavigator.pushPage( "page2.html" ); 
        }); 
    });
</script>

<ons-navigator id="mynavigator" page="page1.html"></ons-navigator>
<ons-template id="page1.html">

    <ons-gesture-detector>
        <ons-page>
            <div class="center">Page 1</div>
            <p>This is the first page.</p>

        </ons-page>
    </ons-gesture-detector>
</ons-template>

<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center">Page 2</div>
    </ons-toolbar>
    <p>This is the second page.</p>
  </ons-page>
</ons-template>