js轮播图有左右箭头和小点

<div class="all">
  <div class="show">
    <div class="print"></div>
    <div class="dots"></div>
    <div id="direction">
      <div onclick="prev()">⬅</div>
      <div class="two" onclick="next()">➡</div>
    </div>
  </div>
</div>

* {
        margin: 0;
        padding: 0;
      }
      .all {
        margin-left: 10%;
      }
      .show {
        width: 86%;
        height: 650px;
        margin-left: 20px;
        margin-top: 20px;
        overflow: hidden;
        position: relative;
      }
      .print {
        display: flex;
        width: 800%;
        transition: all 0.5s;
      }
      .dots {
        display: flex;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
      }
      .dot {
        width: 15px;
        height: 15px;
        margin-left: 13px;
        border-radius: 10px;
        background-color: honeydew;
        cursor: pointer;
      }
      .dot.active {
        background-color: pink;
      }
      .print img {
        width: 100%;
        height: 650px;
        object-fit: cover;
      }
      #direction {
        width: 100%;
        height: 5vh;
        position: absolute;
        top: 45%;
        display: flex;
      }
      #direction div {
        width: 3%;
        height: 5vh;
        text-align: center;
        border-radius: 10px;
        line-height: 5vh;
        font-size: 16px;
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
        overflow: hidden;
        cursor: pointer;
      }
      .two {
        margin-left: 94%;
      }

<script>
      // 获取数据
      let data;
      let time;
      let big = document.getElementsByClassName('all')[0];
      let index = 0;
      let dotContainer = document.querySelector('.dots');
      let print = document.querySelector('.print');
      let dots = [];
      
      let xhr = new XMLHttpRequest();
      xhr.open('get', 'js/new_file.json', true);
      xhr.send();
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
          let text = xhr.responseText;
          console.log(text);
          data = JSON.parse(text);
          console.log(data);
          renderer(data);
        }
      };
      // 渲染轮播图
      function renderer(data) {
        let str = '';
        let dotStr = '';
        for (let i = 0; i < data.length; i++) {
          str += `<img src="${data[i].path}" alt="" />`; // 构建图片标签
          dotStr += `<div class="dot" onclick="control(${i})"></div>`; // 构建小圆点
        }
        str += `<img src="${data[0].path}" alt="" />`; // 添加第一张图片到最后，实现无缝轮播
        print.innerHTML = str; // 插入图片标签
        dotContainer.innerHTML = dotStr; // 插入小圆点
        dots = document.querySelectorAll('.dot'); // 获取所有小圆点
        dots[0].classList.add('active'); // 将第一个小圆点设为激活状态
        times();
      }
      // 定时器，控制自动轮播
      function times() {
        time = setInterval(function() {
          next();
        }, 3000);
      }
      // 下一张
      function next() {
        index++;
        moveSlide(); // 移动轮播图
      }
      // 上一张
      function prev() {
        index--;
        moveSlide(); // 移动轮播图
      }
      // 控制显示特定图片
      function control(i) {
        index = i;
        moveSlide(); // 移动轮播图
      }
      // 移动轮播图
      function moveSlide() {
        if (index > data.length) {
          // 处理超出范围的情况
          print.style.transition = "none";
          print.style.marginLeft = "0%";
          index = 0;
          setTimeout(function() {
            print.style.transition = "margin-left 0.5s";
            index++;
            print.style.marginLeft = `-${index * 100}%`;
          }, 20);
        } else if (index < 0) {
          // 处理负数的情况
          print.style.transition = "none";
          index = data.length - 1;
          print.style.marginLeft = `-${index * 100}%`;
          setTimeout(function() {
            print.style.transition = "margin-left 0.5s";
          }, 20);
        } else {
          // 正常情况下的移动
          print.style.transition = "margin-left 0.5s";
          print.style.marginLeft = `-${index * 100}%`;
        }
        updateDots(); // 更新小圆点
      }
      // 更新小圆点状态
      function updateDots() {
        dots.forEach(function(dot, i) {
          let actualIndex = index % data.length;
          if (i === actualIndex) {
            dot.classList.add('active'); // 激活当前图片对应的小圆点
          } else {
            dot.classList.remove('active'); // 移除其他小圆点的激活状态
          }
        });
      }
      // 鼠标悬停暂停自动轮播
      big.onmouseover = function() {
        clearInterval(time);
      }
      big.onmouseout = function() {
        clearInterval(time);
        time = setInterval(function() {
          next();
        }, 3000);
      }
    </script>