Javascript &引用；放置点“；在HTML/CSS/JS幻灯片中

我试图用底部的导航点或占位符点制作一个幻灯片-幻灯片本身正在工作，但在这里的最小示例中，只有一个点显示在底部。我不知道我做错了什么-研究了几天，然后又回来了，现在是时候问个问题了

以下是我正在使用的代码：

html{
背景颜色：浅蓝色；
}
身体{
宽度：1024px；
高度：768px；
左边距：自动；
右边距：自动；
边框样式：实心；
背景：浅绿色；
位置：相对位置；
}
分区横幅{
位置：绝对位置；
顶部：50px；
宽度：100%；
高度：120px；
背景：粉红色；
文本对齐：居中；
填充顶部：0px；
垫底：0px；
字号：1.5em；
}
小横幅{
位置：绝对位置；
顶部：0px；
高度：50px；
宽度：100%；
背景：橙色；
文本对齐：居中；
}
div#滑盖容器{
位置：绝对位置；
左：200px；
顶部：170px；
高度：558px；
宽度：794px；
填充顶部：30px；
左侧填充：30px；
字号：2em；
背景：黄色；
}
副驾驶{
位置：绝对位置；
顶部：170px；
左：0px；
宽度：200px；
高度：558px；
}
.内容幻灯片{
显示：无；
}
海底导航{
位置：绝对位置；
底部：0px；
高度：40px；
宽度：100%；
背景：粉红色；
文本对齐：居中；
}
多特先生{
位置：绝对位置；
底部：60px；
光标：指针；
高度：15px；
宽度：15px；
利润率：22px 22px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
.active，.dot:悬停{
背景色：#717171；
}
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
.prev，.next{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
填充：16px；
利润上限：-22px；
颜色：红色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
用户选择：无；
}
.下一个{
右：0；
边界半径：3px 0 3px；
}
上一篇{
左：0；
}
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
}
演讲题目：测试，测试
介绍








这里有一个提纲：

导言
第一节
第二节
第三节
结论


以下是一些主题：

主题1
主题2
主题3


……结论如下：

结论A
结论B
结论C
结论D
结论E


❮
❯
页脚

var slideIndex=1；