スライダーのループ処理

前提・実現したいこと

Jquery初心者です。

課題でJquery、プラグインなしでスライダーを作っています。
スライダーは自動再生し、五秒毎に切り替わり、
右、左ボタンでもコントロールできるようにしたいです。

ボタンでのコントロールはうまくいったのですが、
自動再生に問題があります。

スライドが最後までいった時、最初のスライドを最後のスライドの後ろにつけて、
ループにしたいのですがうまくいきません。

あと、冒頭部分でインジゲーター（class：pagination）のa要素をjqueryで追加しているのですが、追加されたa要素の前にundefinedが出て、肝心のインジゲーターが存在していますが表示されません。

該当のソースコード

HTML
1<body>
2    <div class="container-fluid">
3      <section class="row" id="slider">
4       <div class="col-md-12 slide-container">
5         <div class="col-md-12 slide" id="slide06"></div>         
6         <div class="col-md-12 slide" id="slide01"></div>
7         <div class="col-md-12 slide" id="slide02"></div>
8         <div class="col-md-12 slide" id="slide03"></div>
9         <div class="col-md-12 slide" id="slide04"></div>
10         <div class="col-md-12 slide" id="slide05"></div>
11      </div>
12      <div class="slider-navi">
13        <a href="#" class="arrow next"><i class="fas fa-arrow-right"></i></a>
14        <a href="#" class="arrow prev"><i class="fas fa-arrow-left"></i></a>
15      </div>
16      <div class="pagination"></div>
17    </section>

CSS
1.container-fluid, .row, .col-md-12{
2  margin:0;
3  padding: 0;
4}
5
6#slider {
7  height: 500px;
8  width: 100%;
9  position: relative;
10  overflow: hidden;
11  color:#fff;
12}
13
14.slide-container {
15  width: 600%;
16  height: 100%;
17  display: flex;
18  position: absolute;
19  z-index: 0;
20  left: -100%;
21}
22
23.slider-navi a,
24.pagination a {
25  overflow: hidden;
26}
27
28.slider-navi a.disabled{
29  display: none;
30}
31
32.arrow {
33  z-index: 10;
34  cursor: pointer;
35  position: absolute;
36  bottom: 30px;
37  color: #FFF;
38  font-size: 1.4em;
39  border: solid 1px #FFF;
40  padding: 8px;
41}
42
43.next {
44 position: absolute;
45 right: 25px;
46}
47
48.prev {
49  position: absolute;
50  left: 25px;
51}
52
53.pagination {
54    position: absolute;
55    bottom: 30px;
56    left: 50%;
57    margin-left: -50px;
58    width: 100px;
59    z-index: 30;
60}
61
62.pagination a {
63    float: left;
64    margin: 5px 5px 0;
65    width: 10px;
66    height: 10px;
67    background: #eee;
68    vertical-align: middle;
69}
70
71.pagination a.active{
72   cursor: default;
73}
74
75.pagination a.active:before{
76   margin-left: -130px;
77}
78

Jquery
1
2let slider, slideContainer, slides, nav, pagination, imgNumber, animationSpeed, interval, currentSlide, paginationHtml, timer;
3
4var $slider = $('#slider'), // on cible le bloc du slider
5    $slideContainer = $slider.find('.slide-container'),
6    $slides = $slideContainer.find('.slide'),
7
8    $nav = $slider.find('.slider-navi'),
9    $pagination = $slider.find('.pagination'),
10
11    $slideLength = $slides.length, 
12    $currentSlide = 1,
13    $paginationHtml = '',
14    i = 0;
15
16slides.each(function(i) {
17    paginationHtml += '<a href="#">' + ( i + 1) + '</a>';
18  });
19  $pagination.html(paginationHtml);
20
21const maSlider = {
22
23  clickBouton: function(){
24    $('.prev').on('click', function(){
25      //event.preventDefault();
26      $slideContainer.animate({'left': '0'},300, function(){
27        $(this).css('left','-100%');
28        $('.slide').first().before($('.slide').last());
29      });
30    });
31
32    $('.next').on('click', function(){
33      //event.preventDefault();
34      $slideContainer.animate({'left': '-200%'},300, function(){
35        $(this).css('left','-100%');
36        $('.slide').last().after($('.slide').first());
37      });
38    });
39
40    $pagination.on('click', function(event){
41      event.preventDefault();
42      if($('.pagination a').hasClass('active')){
43        startSlider($(this).index());
44      }
45    });
46  }, //clickBouton
47
48  startSlider: function(){
49    timer = setInterval(function(){
50      let large = $slider.width();
51
52      $slideContainer.animate({'margin-left': '-='+large}, function(){
53       currentSlide++;
54        if (currentSlide === $slides.length){
55         currentSlide = 1;
56
57         let lastSlide = $slides.first();
58         $slideContainer.append(lastSlide);
59
60         let lastSlidePosition = large * ($slideLength -1);
61         lastSlide.css('left', `${ lastSlidePosition }px`);
62
63         for(var i = 1; i < $slideLength; i++){
64         let slide = currentSlide.eq(i);
65         const slidePosition = large * (i-2);
66         slide.animate({left: `${ slidePosition }px`}, 5000);
67         }
68
69         const movedLastSlidePosition = large * ($slideLength - 2)
70         lastSlide.animate({left: `${ movedLastSlidePosition }px`}, 5000)
71          }
72        });
73    }, 5000);
74  },
75
76  stopSlider: function(){
77      clearInterval();
78  },
79
80  $slider.on({
81    mouseenter: stopTimer,
82    mouseleave: startSlider
83  });
84};
85//})
86
87maSlider.startSlider();
88maSlider.stopSlider();
89maSlider.clickBouton();