问题1：轮播默认不可见的修复 #

你设置了.mySlides { display: none; }让所有轮播项默认隐藏，导致页面加载后无轮播图显示，可通过以下两种方式解决：

方式1：直接显示第一个轮播项 #

在现有CSS中添加：

/* 强制第一个轮播项默认显示 */
.mySlides:first-of-type {
  display: block;
}

方式2：通过.active类控制（适配JS切换逻辑） #

1. 保留.mySlides默认隐藏规则：

.mySlides {
  display: none;
}

2. 添加.active类的显示规则：

.mySlides.active {
  display: block;
}

3. 在HTML中给第一个轮播项添加active类：

<div class="mySlides active">
  <!-- 轮播内容 -->
</div>

问题2：Previous箭头位置错误的修复 #

.prev元素仅设置了垂直方向定位，未定义水平位置，导致默认处于容器中间。只需给.prev添加left: 0即可将其定位到轮播容器左侧：

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 0; /* 新增：左箭头定位到容器左侧 */
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 8px;
  transition: 1.2s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

（.next已设置right:0，无需修改，左右箭头会分别位于容器两侧）

内容的提问来源于stack exchange，提问作者Kplan