スライドショーができない　index.js表示ができない

jqueryなしのスライドショーの表示ができません。
写真は出ますが、スライドショー形式にはならず、またindex.jsのコードが表示されません。
間違っているところがあれば指摘してください。
1,Java index.jsのコード文字が正しくありませんのエラーの表示
2,Java htmlのコード
3,Cssのコード layout
4,Cssのコード reset

Java
1// スライダーに表示する画像のパス
2var imgList = [
3    "images/img01.jpg",
4    "images/img02.jpg",
5    "images/img03.jpg",
6    "images/img04.jpg",
7    "images/img05.jpg"
8];
9
10// 画像とナビの要素を自動で追加
11    // li要素を取得
12 var slide = document.createElement("li");
13    // li要素の中に画像タグを埋め込む
14 slide.innerHTML = "<（注：全角）img src='" + imgList[i] + "'>";
15    // li要素をクラス名「slider-inner」の子要素として追加
16document.getElementsByClassName("slider-inner")[0].appendChild(slide);
17    // li要素を取得
18 var nav = document.createElement("li");
19    // プロパティ「data-nav-index」に数値を割り振る
20  nav.setAttribute("data-nav-index", i);
21    // li要素をクラス名「nav」の子要素として追加
22 document.getElementsByClassName("nav")[0].appendChild(nav);
23
24// スライドの数を取得(処理のために-1する)
25var length = imgList.length - 1;
26
27// クラス名「imageSlide」に画像の1枚の要素を格納
28var imageSlide = document.getElementsByClassName("slider-inner")[0].getElementsByTagName("li");
29// クラス名「dotNavigation」にドットナビの1つの要素を格納
30var dotNavigation = document.getElementsByClassName("nav")[0].getElementsByTagName("li");
31// 「現在○○枚目のスライドを表示している」というインデックス番号を格納する変数
32var nowIndex = 0;
33
34// 現在表示されている画像とドットナビにクラス名を付ける
35imageSlide[nowIndex].classList.add("show");
36dotNavigation[nowIndex].classList.add("current");
37
38// スライドがアニメーション中か判断するフラグ
39var isChanging = false;
40// スライドのsetTimeoutを管理するタイマー
41var slideTimer;
42// スライド切り替え時に呼び出す関数
43function sliderSlide(val) {
44    if (isChanging === true) {
45        return false;
46    }
47 isChanging = true;
48    // 現在表示している画像とナビからクラス名を削除
49    imageSlide[nowIndex].classList.remove("show");
50    dotNavigation[nowIndex].classList.remove("current");
51    nowIndex = val;
52    // 次に表示するスライドとナビにカレントクラスを設定
53    imageSlide[nowIndex].classList.add("show");
54    dotNavigation[nowIndex].classList.add("current");
55    // アニメーションが終わるタイミングでisChangingのステータスをfalseに
56    slideTimer = setTimeout(function(){
57        isChanging = false;
58    }, 600);
59}
60
61// 左矢印のナビをクリックした時のイベント
62document.getElementById("arrow-prev").addEventListener("click", function(){
63    var index = nowIndex - 1;
64    if(index < 0){
65      index = length;
66    }
67    sliderSlide(index);
68}, false);
69
70// 右矢印のナビをクリックした時のイベント
71document.getElementById("arrow-next").addEventListener("click", function(){
72    var index = nowIndex + 1;
73    if(index > length){
74      index = 0;
75    }
76    sliderSlide(index);
77}, false);
78
79// ドットナビをクリックした時のイベントを作成
80for(var i = 0; i < dotNavigation.length; i++) {
81    // データ属性のインデックス番号を元にスライドを行う
82    dotNavigation[i].addEventListener("click", function(){
83        var index = Number(this.getAttribute("data-nav-index"));
84        sliderSlide(index);
85    }, false);
86}
87
88

Java
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width">
6<title>スライダー</title>
7<link rel="stylesheet" href="css/reset(1).css">
8<link rel="stylesheet" href="css/layout(3).css">
9</head>
10<body>
11<div class="slider">
12    <ul class="slider-inner">
13    </ul>
14    <ul class="nav">
15    </ul>
16    <p id="arrow-prev" class="arrow">←</p>
17    <p id="arrow-next" class="arrow">→</p>
18</div>
19<script src="js/index.js"></script>
20<div class="slider">
21<img src="img01.jpg"width="640" height="480" alt="">
22<img src="img02.jpg"width="640" height="480" alt="">
23<img src="img03.jpg"width="640" height="480" alt="">
24<img src="img04.jpg"width="640" height="480" alt="">
25<img src="img05.jpg"width="640" height="480" alt="">
26<h3>スライドショーを作る(Chapter8-2)</h3>
27<p>提出日：2021年6月21日</p>
28</body>
29</html>

2,Java htmlのコード

Java
1.slider {
2    position: relative;
3    width: 640px;
4    height: 480px;
5    margin: 0 auto
6}
7
8.slider .slider-inner {
9    position: relative;
10    top: 0;
11    left: 0;
12    width: 100%;
13    height: 100%
14}
15
16.slider .slider-inner li {
17    position: absolute;
18    top: 0;
19    left: 0;
20    width: 100%;
21    height: 100%;
22    opacity: 0;
23    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
24    -webkit-transition: all 600ms;
25    transition: all 600ms;
26    pointer-events: none
27}
28
29.slider .slider-inner li.show {
30    opacity: 1;
31    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
32    z-index: 1;
33    pointer-events: auto
34}
35
36.slider .nav {
37    width: 100%;
38    margin-top: 20px;
39    text-align: center;
40    font-size: 0
41}
42
43.slider .nav li {
44    display: inline-block;
45    width: 15px;
46    height: 15px;
47    margin: 0 5px;
48    border-radius: 15px;
49    background: #ddd;
50    cursor: pointer;
51    -webkit-transition: background 400ms;
52    transition: background 400ms
53}
54
55.slider .nav li:hover {
56    background: #aaa
57}
58
59.slider .nav li.current {
60    background: #aaa
61}
62
63.slider .arrow {
64    position: absolute;
65    top: 50%;
66    font-size: 20px;
67    cursor: pointer;
68    width: 20px;
69    height: 40px;
70    background: #000;
71    color: #fff;
72    line-height: 40px;
73    padding: 5px;
74    -webkit-transition: opacity 400ms;
75    transition: opacity 400ms
76}
77
78.slider .arrow:hover {
79    opacity: .7;
80    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"
81}
82
83.slider .arrow#arrow-prev {
84    left: 0;
85    -webkit-transform: translate(-100%,-50%);
86    transform: translate(-100%,-50%)
87}
88
89.slider .arrow#arrow-next {
90    right: 0;
91    -webkit-transform: translate(100%,-50%);
92    transform: translate(100%,-50%)
93}

3,Cssのコード layout

Java
1.slider {
2    position: relative;
3    width: 640px;
4    height: 480px;
5    margin: 0 auto
6}
7
8.slider .slider-inner {
9    position: relative;
10    top: 0;
11    left: 0;
12    width: 100%;
13    height: 100%
14}
15
16.slider .slider-inner li {
17    position: absolute;
18    top: 0;
19    left: 0;
20    width: 100%;
21    height: 100%;
22    opacity: 0;
23    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
24    -webkit-transition: all 600ms;
25    transition: all 600ms;
26    pointer-events: none
27}
28
29.slider .slider-inner li.show {
30    opacity: 1;
31    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
32    z-index: 1;
33    pointer-events: auto
34}
35
36.slider .nav {
37    width: 100%;
38    margin-top: 20px;
39    text-align: center;
40    font-size: 0
41}
42
43.slider .nav li {
44    display: inline-block;
45    width: 15px;
46    height: 15px;
47    margin: 0 5px;
48    border-radius: 15px;
49    background: #ddd;
50    cursor: pointer;
51    -webkit-transition: background 400ms;
52    transition: background 400ms
53}
54
55.slider .nav li:hover {
56    background: #aaa
57}
58
59.slider .nav li.current {
60    background: #aaa
61}
62
63.slider .arrow {
64    position: absolute;
65    top: 50%;
66    font-size: 20px;
67    cursor: pointer;
68    width: 20px;
69    height: 40px;
70    background: #000;
71    color: #fff;
72    line-height: 40px;
73    padding: 5px;
74    -webkit-transition: opacity 400ms;
75    transition: opacity 400ms
76}
77
78.slider .arrow:hover {
79    opacity: .7;
80    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"
81}
82
83.slider .arrow#arrow-prev {
84    left: 0;
85    -webkit-transform: translate(-100%,-50%);
86    transform: translate(-100%,-50%)
87}
88
89.slider .arrow#arrow-next {
90    right: 0;
91    -webkit-transform: translate(100%,-50%);
92    transform: translate(100%,-50%)
93}

4,Cssのコード reset

Java
1@charset "utf-8";
2/* 
3html5doctor.com Reset Stylesheet
4v1.6.1
5Last Updated: 2010-09-17
6Author: Richard Clark - http://richclarkdesign.com 
7Twitter: @rich_clark
8*/
9html, body, div, span, object, iframe,
10h1, h2, h3, h4, h5, h6, p, blockquote, pre,
11abbr, address, cite, code,
12del, dfn, em, img, ins, kbd, q, samp,
13small, strong, sub, sup, var,
14b, i,
15dl, dt, dd, ol, ul, li,
16fieldset, form, label, legend,
17table, caption, tbody, tfoot, thead, tr, th, td,
18article, aside, canvas, details, figcaption, figure,
19footer, header, hgroup, menu, nav, section, summary,
20time, mark, audio, video {
21    margin: 0;
22    padding: 0;
23    border: 0;
24    outline: 0;
25    font-size: 100%;
26    vertical-align: baseline;
27    background: transparent;
28}
29
30body {
31    line-height: 1;
32}
33
34article, aside, details, figcaption, figure,
35footer, header, hgroup, menu, nav, section {
36    display: block;
37}
38
39nav ul {
40    list-style: none;
41}
42
43ul li {
44    list-style-type: none;
45}
46
47blockquote, q {
48    quotes: none;
49}
50
51blockquote:before, blockquote:after,
52q:before, q:after {
53    content: '';
54    content: none;
55}
56
57a {
58    margin: 0;
59    padding: 0;
60    font-size: 100%;
61    vertical-align: baseline;
62    background: transparent;
63}
64
65/* change colours to suit your needs */
66ins {
67    background-color: #ff9;
68    color: #000;
69    text-decoration: none;
70}
71
72/* change colours to suit your needs */
73mark {