How to implement the jQuery carousel function

<!-- The entire carousel area-->
  <div class="container">
   <!-- Carousel-->
   <ul class="items" style="left:-200px">
   <!-- Actually only 5 pictures are rotated, the first one is actually placed at the last one, and the last one is actually placed at the first one, a trick -->
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
   </ul>
   <!-- Left and right page buttons -->
   <span class="left">&lt;</span>
   <span class="right">&gt;</span>
   <!-- Dot -->
   <ul class="points">
    <li class="current"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
</div>

<style>
   /* Carousel area*/
   .container {
    width: 200px;
    height: 100px;
    margin: 100px auto;
    overflow: hidden;
    position: relative;
   }

   ul {
    position: absolute;
    list-style-type: none;
    width: 1400px;
    padding: 0;
    margin: 0;
   }

   /* Carousel images*/
   .items li {
    width: 200px;
    height: 100px;
    margin: 0;
    padding: 0;
    float: left;
    background-color: pink;
    text-align: center;
   }
   /* Left and right page span */
   span {
    display: block;
    width: 20px;
    height: 30px;
    background-color: rgba(70, 130, 180, 0.3);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 30px;
   }

   span:hover {
    cursor: pointer;
   }

   .left {
    left: 0;
   }

   .right {
    right: 0;
   }
   /* dot */
   .points {
    width: 45px;
    margin: 0;
    padding: 0;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
   }

   .points li {
    float: left;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin: 1px;
    background-color: rgba(0, 0, 0, 0.5);
   }

   .points li:hover {
    background-color: rgba(255, 250, 205, 1);
   }

   .points .current {
    background-color: rgba(255, 250, 205, 1);
   }
</style> 

<script type="text/javascript">
   // 1. Click the button to switch pages left and right------carousel + animation, mouse enters, playback pauses, mouse moves out, playback continues// 2. The page automatically switches every 3 seconds// 3. The dots switch styles together// Switch left let $left = $('.left')
   // Switch right let $right = $('.right')
   //Picture li
   let $list = $('.items')
   let $items = $list.children()
   // Large container let $container = $('.container')
   // Points let $points = $('.points').children()
   const length = $points.length

   //Total offset set = li.width
   const itemWidth = 200
   // Set each animation time in ms
   const time = 50
   // Number of moves const n = 20
   // list maximum offset - (length+1)*li.width
   const long = -(length + 1) * itemWidth
   // Specifies whether the page is being turned. By default, the page is not being turned.------>Solve the problem of position deviation when clicking on the page when turning the page. let moveFlag = false
   //Timer moving time const TIME = 3000
   // Switch to the left $left.click(function() {
    changeItem(true)
   })
   // Switch to the right $right.click(function() {
    changeItem(false)
   })
   // Automatic switching let timer = setInterval(function() {
    changeItem(false)
   }, TIME)
   // When the mouse enters, the playback pauses, and when the mouse moves out, the playback continues$container.hover(function() {
    clearInterval(timer)
   }, function() {
    timer = setInterval(function() {
     changeItem(false)
    }, TIME)
   })
   //Click the dot to turn the page$points.click(function() {
    //Get the index of the currently clicked element
    let index = $(this).index()
    // Jump to the corresponding index map changeItem(index)
    // Cancel the styles of other siblings of dots$points.eq(index).addClass('current').siblings().removeClass('current')
   })
   // Left and right switching function encapsulation function changeItem(flag) {
    // If the page is currently being turned, return directly if (moveFlag) {
     return
    }
    // If the page is not being turned, execute the code and change moveFlag to true to indicate that the page is being turned moveFlag = true
    // offset is the offset let offset = 0;
    // 
    let currentLeft = parseInt($list.position().left)
    // If the passed in type is boolean, it means smooth left and right page turning // If the passed in type is numeric, it means clicking on the dot to turn the page if (typeof flag == 'boolean') {
     // Determine whether to flip left or right, and set the corresponding displacement offset = flag ? itemWidth : -itemWidth
    } else {
     // Click the dot to turn the page // -(flag + 1)*itemWidth is the target displacement, currentLeft is the current distance offset = -(flag + 1) * itemWidth - currentLeft
    }
    // Used to accumulate the number of executions let i = 0
    /*
    Animation effect switching: Calculate the total distance according to the number of times = total offset = offset
    Set time each time
    */
    // The distance of each movement itemOffset
    let itemOffset = offset / n
    // Get the current left
    // Timer function const timer = setInterval(function() {
     // Add one each time it is executed until i===n, which means the timer will stop when the number of times is enough i++
     currentLeft += itemOffset
     // Set the left value // You must set the value first, then judge $list.css('left', currentLeft)
     if (i === n) {
      // The displacement is enough, clear the timer clearInterval(timer)
      // Page turning ends moveFlag = false
      // The dot changes accordingly$points.eq(Math.abs(currentLeft / itemWidth) - 1).addClass('current').siblings().removeClass('current')
      // When the last image is located, switch to the second image, the visual is a carousel if (currentLeft == long) {
       $list.css('left', -itemWidth)
       // Set the dots to the actual first image $points.eq(0).addClass('current').siblings().removeClass('current')
       // If the bottom image of the last image has been reached, return to the actual first image} else if (currentLeft == 0) {
       $list.css('left', -length * itemWidth)
       // Set the dots to the actual last picture $points.eq(length - 1).addClass('current').siblings().removeClass('current')
      }
     }
    }, time)
   }
</script>