Native JavaScript to achieve the effect of carousel

<div class="box">
 <img src="./image/banner1.jpg" />
 <div class="arrows left">
  <img src="./image/left.png" />
 </div>
 <div class="arrows right">
  <img src="./image/right.png" />
 </div>
 <ul class="buttom"></ul>
</div>

.box {
 width: 300px;
 height: 200px;
 background: #333;
 border-radius: 5px;
 overflow: hidden;
 margin: 0 auto;
 font-size: 0;
 position: relative;
 display: flex;
 align-items: center;
}
 
.box:hover .arrows{
 display: block;
}
 
.box img{
 width: 100%;
}
 
.arrows {
 width: 20px;
 text-align: center;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 z-index: 9;
 font-size: 30px;
 display: none;
}
 
.left{
 left: 10px;
}
 
.right{
 right: 10px;
}
 
.button{
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 position: absolute;
 bottom: 10px;
 left: 50%;
 transform: translateX(-50%);
}
 
.button li {
 width: 20px;
 height: 5px;
 border-radius: 1px;
 background: #fff;
 margin: 0 2px;
}
 
.active {
 background: red !important;
}

let count = 0 // Create the current carousel index // Get the DOM element let box = document.querySelector('.box')
let img = document.querySelector('img')
let left = document.querySelector('.left')
let right = document.querySelector('.right')
let ul = document.querySelector('ul')
 
// Carousel image array let imgArr = [
 './image/banner1.jpg',
 './image/banner2.jpg',
 './image/banner3.jpg',
 './image/banner4.jpg'
]
 
// Traverse the image array and add the corresponding bottom switch li tag imgArr.forEach(() => {
 let li = document.createElement('li')
 ul.appendChild(li)
})
 
let lis = document.querySelectorAll('li') // Get all li tags lis[0].className = 'active' // Add selected state to the first li tag // Switch the slideshow function switchImg (type) {
 return function() {
  if(type == 1) {
   if(count - 1 < 0) {
    count = imgArr.length - 1
   } else {
    count += -1
   }
  } else {
   if(count + 1 >= imgArr.length) {
    count = 0
   } else {
    count += 1
   }
  }
  img.src = imgArr[count]
  lis.forEach((v,i) => {
   lis[i].className = ''
   if(i == count) {
    lis[i].className = 'active'
   }
  })
 }
}
 
left.addEventListener('click', switchImg(1)) // Previous slideshow right.addEventListener('click', switchImg(2)) // Next slideshow // Click the bottom li tag to switch slideshow lis.forEach((value,index) => {
 lis[index].addEventListener('click', () => {
  lis.forEach((v,i) => {
   lis[i].className = ''
  })
  count = index
  img.src = imgArr[count]
  lis[count].className = 'active'
 })
})
// Create a timer to automatically switch to the next slide every 2.5 seconds let swiper = setInterval(() => {
 right.click()
},2500)
//Mouse enters and pauses automatic switching box.onmouseenter = () => {
 clearInterval(swiper)
}
//Mouse out to start automatic switching box.onmouseleave = () => {
 swiper = setInterval(() => {
  right.click()
 },1500)
}