使用JavaScript创建幻灯片

我目前正在做一个小的网络项目，它应该包含多个幻灯片。因为我以前从未真正使用过JavaScript，所以这比我希望的更难

我从w3schools中找到了这段相当简单的代码，我正在尝试实现它。遗憾的是，我面临着多个问题，我不知道如何解决：

起初，我正在尝试页面上的第一个示例（）“幻灯片放映/旋转木马”。这很好，除非你点击“上一步/下一步”按钮，否则它不会显示任何内容。因此，如果我重新加载页面，幻灯片显示容器将为空，而不是显示第一张幻灯片

现在我想在我的网页上放置第二个滑块。在这里，我将JavaScript代码切换到w3schools“多个幻灯片”中的最后一个示例。这里我遇到了和以前一样的问题：当刷新页面时，两个幻灯片都不会显示图像，除非你点击上一个/下一个按钮。我还想在每张幻灯片的底部添加点。遗憾的是，我不知道如何在JavaScript代码中添加点

有人能帮我理解吗？ 非常高兴提前谢谢！！：）

编辑1： 我喜欢清晰化：我不想要自动幻灯片。只有当我点击上一个/下一个按钮或点时，幻灯片本身才应该改变。问题是，当我第一次打开页面时，幻灯片上什么也没有显示。默认情况下，我喜欢显示第一张幻灯片

编辑2： 我只是将JavaScript代码复制到html的底部（而不是extern script.js文件），这解决了重新构建页面时不显示第一张幻灯片的问题！但是我仍然需要一些帮助来集成javascript代码中的点

我的代码：

/************************************************************************************************幻灯片**/
var slideIndex=[1,1]；
/*使用不同的CSS类对每个幻灯片组的成员进行分类*/
var slideId=[“slides1”，“slides2”]
放映幻灯片（0,0）；
放映幻灯片（0,1）；
函数加滑块（n，否）{
放映幻灯片（幻灯片索引[no]+=n，no）；
}
功能演示幻灯片（n，否）{
var i；
var x=document.getElementsByClassName（slideId[no]）；
如果（n>x.length）{slideIndex[no]=1}
如果（n<1）{slideIndex[no]=x.length}
对于（i=0；i

*{边距：0px；填充：0px；边框：0px；框大小：边框框；}
html{宽度：100%；高度：100%；}
身体{
位置：相对位置；
保证金：0px自动；
填充：0px；
身高：100%；
宽度：100%；
}
/******************************************************************基本CSS*/
身体{
字体系列：“蒙特塞拉特”；
字体大小：400；
字体大小：12px；
}
/**标题**/
h1、h2、h3、h4、h5、h6{
字体系列：“蒙特塞拉特”；
字体大小：正常；
位置：相对位置；
填充：0 20px 0；
}
h1{字体大小：33px；}
/**布局**/
.罗：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
[类别*=“列-”]{
浮动：左；
宽度：99.99999%；
身高：100%；
}
@介质（最小宽度：640像素）{
.col-s-1{宽度：99.99999%；}.col-s-2{宽度：49.99999%；}.col-s-3{宽度：33.22222%；}.col-s-4{宽度：24.9999%；}
}
@介质（最小宽度：800px）{
.col-m-1{宽度：99.99999%；}.col-m-2{宽度：49.99999%；}.col-m-3{宽度：33.22222%；}.col-m-4{宽度：24.9999%；}
}
@介质（最小宽度：1024px）{
[class*=“col-”]{高度：100vh；}
.col-l-1{宽度：99.99999%；}.col-l-2{宽度：49.99999%；}.col-l-3{宽度：33.22222%；}.col-l-4{宽度：24.9999%；}
}
第{条位置：相对；填充：80px 70px；}
.中心包装{
显示：表格；
宽度：100%；
身高：100%；
}
.中央接线盒{
保证金：0px自动；
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}
/***************************************滑块总成**/
.slideshow容器{
宽度：100%；
身高：100%；
位置：相对位置；
}
.幻灯片1{
显示：无；
宽度：100%；
身高：100%；
}
/**下一步，上一步和下一步**/
.prev，.next{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
利润上限：-22px；
填充：16px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
文字装饰：无；
}
.下一个{
右：0；
边界半径：3px 0 3px；
}
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
}
多特先生{
光标：指针；
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
.active，.dot:悬停{
背景色：#717171；
}
/**褪色动画**/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
/*********************************************滑块1**/
#大滑块{
背景图片：url（'images/red.jpg'）；
背景色：红色；
背景重复：无重复；
背景附件：固定；
背景位置：中心；
背景尺寸：封面；
高度：100vh；
宽度：100%；
}
/**部门**/
.部门{
宽度：300px；
保证金：0px自动；
}
.部门>a{
颜色：#fff；
文字装饰：无；
}
.department>a>i{
字体大小：60px；
边缘底部：10px；
}
.部门>a>h4{
字号：18px；
字体大小：粗体；
}
.部门>a>p{
字体大小：14px；
文本对齐：左对齐；
}
/*********************************************滑块2**/
/**雇员**/
#雇员{
背景色：#222；
颜色：#fff；
}
#员工>h1{
颜色：#fff；
}
.employee_info{color:35;fff；}

class Carousel {
  constructor() {
    this.currentPage = 1;
    this.perPage = 2;
    this.data = [];
    this.getData();
    //if (this.data) {
     // this.displayData();
    //}
    document.querySelector(".right-arrow").addEventListener("click", (event) => {
      event.preventDefault();
      this.handleRightClick();
    });
    document.querySelector(".left-arrow").addEventListener("click", (event) => {
      event.preventDefault();
      this.handleLeftClick();
    });
  }
  countTotalPages() {
    let totalPages = Math.ceil(this.data.length / this.perPage);
    return totalPages;
  }
  handleLeftClick() {
    if (this.currentPage === 1) {
      return;
    }
    this.currentPage--;
    this.displayData();
  }
  handleRightClick() {
    const totalPages = this.countTotalPages();
    if (this.currentPage >= totalPages) {
      return;
    }
    this.currentPage++;
    this.displayData();
  }
  paginate() {
    let startIndex = (this.currentPage - 1) * this.perPage;
    let endIndex = (this.currentPage * this.perPage);
    return this.data.slice(startIndex, endIndex);
  }
  displayData() {
    if (this.data) {
      const paginatedList = this.paginate();
      document.querySelector('.carousel-wrapper').innerHTML = paginatedList !== '' ? paginatedList.map((item) => {
        return `<div class="carousel-item" id=${item.id}>${item.data}</div>`;
      }).join('') : '<div>No Data To show</div>';
      document.querySelector(".current-page").innerHTML = this.currentPage;
      document.querySelector(".total-pages").innerHTML = this.countTotalPages();
    }
  }
  fetch() {
    const data = [{
        'id': '1',
        'data': 'Data 1'
      },
      {
        'id': '2',
        'data': 'Data 2'
      },
      {
        'id': '3',
        'data': 'Data 3'
      },
      {
        'id': '4',
        'data': 'Data 4'
      },
      {
        'id': '5',
        'data': 'Data 5'
      }
    ];
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(data);
      }, 2000);
    });
  }
  async getData() {
    try {
      const response = await this.fetch();
      this.data = response;`enter code here`
      this.displayData();
    } catch (error) {
      console.log('fetch failed', error);
    }
  }
}
let carousel = new Carousel();