Javascript 如何将我的幻灯片中的“下一个/上一个”按钮相对于它们所在的列定位'；你在这页而不是那页？（奖励：让他们成为圆圈？）

好吧，那么。我在我的网站上有一个幻灯片。应该在我网站的一个栏目里。图像与该列完全一致，但“下一步”和“上一步”按钮不一致。我希望它们位于幻灯片所在列的左侧和右侧，最好是垂直居中

奖励：有没有办法让下一个和上一个按钮循环

这是我的代码：

var slideIndex=1；
放映幻灯片（幻灯片索引）；
//下一个/上一个控件
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
//缩略图图像控件
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“演示”）；
var captionText=document.getElementById（“caption”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

莫扎特·阿姆斯特朗公文包主页
@字体{
字体系列：Klik；
src:url（kliklightwebfont.woff）；
}
@字体{
字体系列：粗体字体；
src:url（theboldfont.ttf）；
}
梅因先生{
左边距：200px；
填充：0px 10px；
字体大小：16px；
字体系列：Klik；
显示器：flex；
}
.main p{
字体大小：14px；
字体系列：Klik；
颜色：#000000；
}
.main h1{
字体大小：24px；
字体系列：粗体字体；
颜色：#000000；
}
主要的{
字体大小：12px；
字体系列：Klik；
颜色：#808080；
}
.侧边栏{
身高：100%；
宽度：200px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#000000；
溢出x：隐藏；
填充顶部：20px；
}
.侧边栏a{
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：16px；
字体系列：Klik；
颜色：#ffffff；
显示：块；
}
.侧边栏a：悬停{
颜色：#808080；
}
.侧边栏b{
填充：6px 8px 6px 16px；
文字装饰：无；
字号：28px；
字体系列：粗体字体；
颜色：#ffffff；
显示：块；
}
.侧边栏c{
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：13px；
字体系列：Klik；
颜色：#ffffff；
显示：块；
}
.返回{
填充：5px 0px 5px 5px；
右：0；
左边距：200px；
排名：0；
z指数：2；
溢出x：隐藏；
背景色：#808080；
}
.返回a{
宽度：100%；
高度：0px；
文字装饰：无；
字体大小：12px；
字体系列：Klik；
颜色：#000000；
显示：内联块；
}
.行{
显示：-webkit flex；
显示器：flex；
}
.专栏1{
-webkit-flex:1；
-ms-flex:1；
弹性：1；
填充：10px；
左边距：200px；
}
.专栏2{
-webkit-flex:1；
-ms-flex:1；
弹性：1；
填充：10px；
}
.第2栏h1{
字体系列：粗体字体；
字号：28px；
}
.2小时{
字体系列：粗体字体；
}
.专栏2页{
字体系列：Klik；
}
/*设置页脚的样式*/
.页脚{
背景色：#f1f1；
填充：10px；
文本对齐：居中；
左边距：200px；
字体系列：Klik；
}
/*响应式布局-使三列堆叠在彼此的顶部，而不是相邻*/
@介质（最大宽度：600px）{
.行{
-webkit柔性方向：列；
弯曲方向：立柱；
}
}
迈斯利德斯先生{
显示：无；
}
/*下一步和上一步按钮*/
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：40%；
宽度：自动；
填充：16px；
利润上限：-50px；
颜色：白色；
字体大小：粗体；
字体大小：20px；
边界半径：0 3px 3px 0；
用户选择：无；
-webkit用户选择：无；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：42%；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
❮
❯
这是设计的标题
起始日期：（如2020年夏季）

目的：（e）
        @font-face {
          font-family: Klik;
          src: url(klik-light-webfont.woff);
        }

        @font-face {
          font-family: theBoldFont;
          src: url(theboldfont.ttf);
        }

        .main {
          margin-left: 200px;
          padding: 0px 10px;
          font-size: 16px;
          font-family: Klik;
          display: flex;
        }

        .main p {
          font-size: 14px;
          font-family: Klik;
          color: #000000;
        }

        .main h1 {
          font-size: 24px;
          font-family: theBoldFont;
          color: #000000;
        }

        .main a {
          font-size: 12px;
          font-family: Klik;
          color: #808080;
        }
        
        .sidebar {
          height: 100%;
          width: 200px;
          position: fixed;
          z-index: 1;
          top: 0;
          left: 0;
          background-color: #000000;
          overflow-x: hidden;
          padding-top: 20px;
        }

        .sidebar a {
          padding: 6px 8px 6px 16px;
          text-decoration: none;
          font-size: 16px;
          font-family: Klik;
          color: #ffffff;
          display: block;
        }

        .sidebar a:hover {
          color: #808080;
        }

        .sidebar b {
          padding: 6px 8px 6px 16px;
          text-decoration: none;
          font-size: 28px;
          font-family: theBoldFont;
          color: #ffffff;
          display: block;
        }

        .sidebar c {
          padding: 6px 8px 6px 16px;
          text-decoration: none;
          font-size: 13px;
          font-family: Klik;
          color: #ffffff;
          display: block;
        }

        .return {
          padding: 5px 0px 5px 5px;
          right: 0;
          margin-left: 200px;
          top: 0;
          z-index: 2;
          overflow-x: hidden;
          background-color: #808080;
        }

        .return a {
          width: 100%;
          height: 0px;
          text-decoration: none;
          font-size: 12px;
          font-family: Klik;
          color: #000000;
          display: inline-block;
        }

        .row {
          display: -webkit-flex;
          display: flex;
        }


        .column1 {
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
          padding: 10px;
          margin-left: 200px;
          position:relative;
        }

        .column2 {
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
          padding: 10px;
        }

        .column2 h1 {
        font-family: theBoldFont;
        font-size: 28px;
        }

        .column2 h {
          font-family: theBoldFont;
        }

        .column2 p {
          font-family: Klik;
        }

         /* Style the footer */
        .footer {
          background-color: #f1f1f1;
          padding: 10px;
          text-align: center;
          margin-left: 200px;
          font-family: Klik;
        }

        /* Responsive layout - makes the three columns stack on top of each other                                                 instead of next to each other */
   @media (max-width: 600px) {
   .row {
         -webkit-flex-direction: column;
         flex-direction: column;
    }
 }

  .mySlides {
       display: none;
  }

  /* Next & previous buttons */
 .prev,
 .next {
     cursor: pointer;
     position: absolute;
     top: 40%;
     width: auto;
     padding: 16px;
     margin-top: -50px;
     color: white;
     font-weight: bold;
     font-size: 20px;
     border-radius: 50%;
     user-select: none;
     -webkit-user-select: none;
  }

  /* Position the "next button" to the right */
  .next {
    right: 0%;

   }

   /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }