jQueryでスライドショーの挙動が理解できない

質問内容

jQueryを使ってスライドショーを作成しているのですが、どうしても理解できない部分があり質問に至りました。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <div id="slide">
11    <ul>
12      <li><img src="img/1c19be39f27977ec458de4f0f74f9735_thumb_1680x1280.jpg" alt="画像1"></li>
13      <li><img src="img/sizen.jpg" alt="画像2"></li>
14      <li><img src="img/M45.jpg" alt="画像3"></li>
15    </ul>
16  </div>
17  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
18  <script src="main.js"></script>
19</body>
20</html>

css
1body {
2  margin: 0;
3}
4
5
6ul li {
7  width: 1280px;
8  
9}
10
11img {
12  width: 1280px; /* 1つの画像の横幅をwindowの横幅全体にした*/
13  height: 400px;
14
15}
16
17#slide {
18  position: relative;
19  height: 500px; 
20  background: pink;
21  overflow:hidden;
22}
23
24
25ul {
26  display: flex; /*画像を横並びにする*/
27  position: absolute;
28  top: 50px;
29  list-style: none;
30  margin: 0;
31  padding: 0;
32  width: 3840px;
33  margin: 0 auto;
34 
35  
36}

javascript
1$(function() {
2  let dir = -1;
3
4  let interval = 3000;
5
6  let duration = 700;
7
8  let timer;
9
10  //最後の画像を先頭に持ってくる
11  //これで最後の画像が画面に表示される
12  $("#slide ul").prepend($("#slide li:last-child"));
13
14  
15  //ul全体を画像1枚分左にずらす。これで画像1が表示される。
16  //この時点では、最後の画像がli要素の先頭になってる。
17  //左から画像3、画像1、画像2の順に並んでる
18  $("#slide ul").css("left", -1280);
19
20
21
22  //3秒ごとにslideTimer関数を実行
23  timer = setInterval(slideTimer, 3000);
24
25  function slideTimer() {
26    
27    //この処理だけだと、画像1から画像2へのスライドしかできない。画像2の右に画像3がないから。
28    $('#slide ul').animate({'left': '-=1280px'}, 700, 
29      function() {
30
31      //ulの最後の要素に、liの先頭の要素を持ってくる。
32      //つまり画像3を、画像2の右にもってくる。  
33      //これで画像3が画面に表示される。
34        $(this).append($("#slide li:first-child"));
35
36      
37        $(this).css('left', 1280); **//なぜ1280ではダメなのか?**
38      }
39      );
40  }
41})