横スライドのjsが反応しない

横にスライドするように参考サイトのようにそのまま再現したいのですが
コードの部分は全く同じコピペで行っているのですがjsが反応しないのかスライドの動きが出ません。
headにjsも読み込んでいるのですがどこか間違っているのでしょうか？
初歩的な質問で大変申し訳ないのですが
どこがおかしいかお分かりになる方いらっしゃいますか？

また、このコードですと同じHTML内でのシングルページのスライド移動になりますが
別のhtmlへのスライド移動はできるのでしょうか？

お手数ですがよろしくお願いします。

リンク内容

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8" />
5    <title>title</title>
6    <meta name="description" content="“aaaa" />
7    <link rel="icon" type="image/png" href="images/" />
8    <!-- ファビコン -->
9    <meta name="viewport" content="width=device-width, initial-scale=1" />
10    <!-- font -->
11    <!-- CSS -->
12    <link href="./reset_css/reset.css" rel="stylesheet" />
13    <!--リセットCSS-->
14    <link href="stylesheet.css" rel="stylesheet" />
15    <!-- js -->
16    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
17    <!--jQuery-->
18    <script src="slide.js"></script><!--スライド-->
19  </head>
20  <main>
21    <div id="wrapper">
22      <div id="mask">
23        <div id="item1" class="item">
24          <a name="item1"></a>
25          <div class="content">
26            item1 <a href="#item1" class="panel">1</a> |
27            <a href="#item2" class="panel">2</a> |
28            <a href="#item3" class="panel">3</a> |
29            <a href="#item4" class="panel">4</a> |
30            <a href="#item5" class="panel">5</a>
31          </div>
32        </div>
33        <div id="item2" class="item">
34          <a name="item2"></a>
35          <div class="content">
36            item2 <a href="#item1" class="panel">back</a>
37          </div>
38        </div>
39        <div id="item3" class="item">
40          <a name="item3"></a>
41          <div class="content">
42            item3 <a href="#item1" class="panel">back</a>
43          </div>
44        </div>
45
46        <div id="item4" class="item">
47          <a name="item4"></a>
48          <div class="content">
49            item4 <a href="#item1" class="panel">back</a>
50          </div>
51        </div>
52
53        <div id="item5" class="item">
54          <a name="item5"></a>
55          <div class="content">
56            item5 <a href="#item1" class="panel">back</a>
57          </div>
58        </div>
59      </div>
60    </div>
61  </main>
62</html>
63

css
1body {
2  height: 100%;
3  width: 100%;
4  margin: 0;
5  padding: 0;
6  overflow: hidden;
7}
8
9#wrapper {
10  width: 100%;
11  height: 100%;
12  position: absolute;
13  top: 0;
14  left: 0;
15  background-color: #ccc;
16  overflow: hidden;
17}
18
19#mask {
20  width: 500%;
21  height: 100%;
22  background-color: #eee;
23}
24
25.item {
26  width: 20%;
27  height: 100%;
28  float: left;
29  background-color: #ddd;
30}
31
32.content {
33  width: 400px;
34  height: 300px;
35  top: 20%;
36  margin: 0 auto;
37  background-color: #aaa;
38  position: relative;
39}
40
41.selected {
42  background: #fff;
43  font-weight: 700;
44}
45
46.clear {
47  clear: both;
48}

js
1$(document).ready(function() {
2
3  $('a.panel').click(function() {
4
5    $('a.panel').removeClass('selected');
6    $(this).addClass('selected');
7
8    current = $(this);
9
10    $('#wrapper').scrollTo($(this).attr('href'), 800);
11
12    return false;
13  });
14
15  $(window).resize(function() {
16    resizePanel();
17  });
18
19});
20
21function resizePanel() {
22
23  width = $(window).width();
24  height = $(window).height();
25
26  mask_width = width * $('.item').length;
27
28  $('#debug').html(width + ' ' + height + ' ' + mask_width);
29
30  $('#wrapper, .item').css({
31    width: width,
32    height: height
33  });
34  $('#mask').css({
35    width: mask_width,
36    height: height
37  });
38  $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
39
40}