JSを使用したスライドショーで画像下にドットナビを表示させたい

前提・実現したいこと

JavaScriptでスライドショー作成の勉強中です。
参考書に沿って書き写しているのですが、現段階でGoogleに表示させた場合画像枚数分のドットナビが表示されるようなのですが出ず、どこのコード部分が不備になっておりますでしょうか？

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>スライダー</title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/layout.css">
10</head>
11<body>
12<div class="slider">
13	<ul class="slider-inner">
14    </ul>
15	<ul class="nav">
16    </ul>
17	<p id="arrow-prev" class="arrow">←</p>
18	<p id="arrow-next" class="arrow">→</p>
19</div>
20<script src="js/index.js"></script>
21</body>
22</html>

CSS
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}

CSS
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
43```Java Script
44// スライダーに表示する画像
45
46var imgList = [
47    "images/img01.jpg",
48    "images/img02.jpg",
49    "images/img03.jpg",
50    "images/img04.jpg"
51];
52
53
54// 画像とナビの要素を自動で追加
55
56for (var i=0; i<imgList.length; i++) {
57	
58// li要素を取得
59
60    var slide = document.createElement("li");
61	
62// li要素の中に画像タグを埋め込む
63
64    slide.innerHTML = "<img src='" + imgList[i] + "'>";
65	
66// li要素をクラス名「slider-inner」の子要素として追加
67
68    document.getElementsByClassName("slider-inner")[0].appendChild(slide);
69
70    // li要素を取得
71
72    var nav = document.createElement("li");
73	
74// プロパティ「data-nav-index」に数値を割り振る
75
76    nav.setAttribute("date-nave-index", i);
77
78	// li要素をクラス名「nav」の子要素として追加
79
80    document.getElementsByClassName("nav")[0].appendChild(nav);

行動規範の内容に同意します

回答1件

ベストアンサー

for文の「}」が抜けているようです。

↓手元で試したところ、こちらで動作していました。とりあえず末尾に追加しています。

JS
1var imgList = [
2    "images/img01.jpg",
3    "images/img02.jpg",
4    "images/img03.jpg",
5    "images/img04.jpg"
6];
7
8// 画像とナビの要素を自動で追加
9for (var i = 0; i < imgList.length; i++) {
10    // li要素を取得
11    var slide = document.createElement("li");
12
13    // li要素の中に画像タグを埋め込む
14    slide.innerHTML = "<img src='" + imgList[i] + "'>";
15
16    // li要素をクラス名「slider-inner」の子要素として追加
17    document.getElementsByClassName("slider-inner")[0].appendChild(slide);
18
19    // li要素を取得
20    var nav = document.createElement("li");
21
22    // プロパティ「data-nav-index」に数値を割り振る
23    nav.setAttribute("date-nave-index", i);
24
25    // li要素をクラス名「nav」の子要素として追加
26    document.getElementsByClassName("nav")[0].appendChild(nav);
27
28} // 追加