jQuery　複数枚のスライドを時間ごとに切り替る方法

現状：

6枚のスライドを時間ごとに切り替る機能をjQuery（slickは使用していません。）で実装しています。
そして、6枚の内,4枚のみをoverflow:hiddenで画面に表示させています。
現在は2通りのやり方で実装を考えています。

1通り目は、時間制限で5秒事に自動で切り替えて、消えた画像は一番後ろに追加してループさせるやり方

２通り目は、矢印ボタンとナビバーを表示し、矢印ボタンを押すと切り替わり、消えた画像は一番後ろに追加
してループさせるやり方

困っている事：

２通り目の矢印ボタンで押しても、画像が後ろに回らない事。
矢印ボタンを押し続けると画面に空白ができ6枚すぎたら最初に戻る

Javascriptのコード

Javascript
1$(function(){
2  var $slide_box = $('.pick-content');
3  var number = $slide_box.length;
4  var prev = $('#prev');
5  var next = $('#next');
6  defalut_page = 4;
7  current = 0
8  
9
10  function slider(index) {
11    if (index < 0) {
12      index = number - 1;
13    }
14    if (index > number - 1) {
15      index = 0;
16    }
17    current = index;
18   
19    $slide_box.animate({
20      left: '-210' * index + 'px'
21    });
22    
23    for(i=0; i<number; i++){
24      if(index == i){
25        var pg_index = $('.progress-active').eq(i);
26        $(pg_index).css('background','#000');
27      }else {
28        var pg_index = $('.progress-active').eq(i);
29        $(pg_index).css('background','#fff');
30      }
31    }
32  }
33
34  prev.click(function(event) {
35    event.preventDefault();
36    if ($($slide_box).hasClass('active')){
37      slider(current - 1);
38    } 
39  });
40
41  next.click(function(event) {
42    event.preventDefault();
43    if ($($slide_box).hasClass('active')){
44      slider(current + 1);
45    } 
46  });
47
48  function timerStart() {
49   
50    start = setInterval(function() {
51    
52    var clone = $(".pick-content:first").clone(true);
53 
54    $(".pick-content:first").animate({
55    left : "-10px"
56    }, {
57    duration : 800,
58    complete : function() {
59     
60        $(".pick-content:first").remove();
61      
62        clone.clone(true).insertAfter($(".pick-content:last"));
63    }
64    });
65}, 5000);
66  }
67
68  function timerStop() {
69    clearInterval(start);
70  }
71
72  slider(current);
73  timerStart();
74
75  $slide_box.on({
76    mouseover: timerStop,
77    mouseout: timerStart
78  });
79  prev.on({
80    mouseover: timerStop,
81    mouseout: timerStart
82  });
83  next.on({
84    mouseover: timerStop,
85    mouseout: timerStart
86  });
87
88});

HTMLコード

HTML
1<div class="pick-contents">
2        <div class="slider-btn">
3          <i class="fas fa-arrow-left",  id="prev"></i>
4          <i class="fas fa-arrow-right", id="next"></i>
5        </div>
6        <div class="pick-content active">
7          <div class="pick-category">
8            <p><a href="#">カテゴリー</a></p>
9          </div>
10          <a href="#"><img src="images/logo.png" alt="", width="180px",height="140px"></a>
11          <div class="pick-caption">
12            <a href="">
13              <h3>Hello World</h3>
14              <p>2019年から本格的にプログラミングの勉強を始め、Rubyを使ったエンジニアとして活動中。</p>
15            </a>
16          </div>
17        </div>
18
19        <div class="pick-content active">
20          <div class="pick-category">
21            <p><a href="#">カテゴリー</a></p>
22          </div>
23          <a href="#"><img src="images/Cuhtij6h.png" alt="", width="180px",height="140px"></a>
24          <div class="pick-caption">
25            <a href="">
26              <h3>Hello World</h3>
27              <p>2019年から本格的にプログラミングの勉強を始め、Rubyを使ったエンジニアとして活動中。</p>
28            </a>
29          </div>
30        </div>
31
32        <div class="pick-content active">
33          <div class="pick-category">
34            <p><a href="#">カテゴリー</a></p>
35          </div>
36          <a href="#"><img src="images/Cuhtij6h.png" alt="", width="180px",height="140px"></a>
37          <div class="pick-caption">
38            <a href="">
39              <h3>Hello World</h3>
40              <p>2019年から本格的にプログラミングの勉強を始め、Rubyを使ったエンジニアとして活動中。</p>
41            </a>
42          </div>
43        </div>
44
45        <div class="pick-content active">
46          <div class="pick-category">
47            <p><a href="#">カテゴリー</a></p>
48          </div>
49          <a href="#"><img src="images/Cuhtij6h.png" alt="", width="180px",height="140px"></a>
50          <div class="pick-caption">
51            <a href="">
52              <h3>Hello World</h3>
53              <p>2019年から本格的にプログラミングの勉強を始め、Rubyを使ったエンジニアとして活動中。</p>
54            </a>
55          </div>
56        </div>
57
58        <div class="pick-content active">
59          <div class="pick-category">
60            <p><a href="#">カテゴリー</a></p>
61          </div>
62          <a href="#"><img src="images/Cuhtij6h.png" alt="", width="180px",height="140px"></a>
63          <div class="pick-caption">
64            <a href="">
65              <h3>Hello World</h3>
66              <p>2019年から本格的にプログラミングの勉強を始め、Rubyを使ったエンジニアとして活動中。</p>
67            </a>
68          </div>
69        </div>
70
71        <div class="pick-content active">
72          <div class="pick-category">
73            <p><a href="#">カテゴリー</a></p>
74          </div>
75          <a href="#"><img src="images/logo.png" alt="", width="180px",height="140px"></a>
76          <div class="pick-caption">
77            <a href="">
78              <h3>Hello World</h3>
79              <p>2019年から本格的にプログラミングの勉強を始め、Rubyを使ったエンジニアとして活動中。</p>
80            </a>
81          </div>
82        </div>
83
84        <div class="progress-bar">
85          <span class="progress-active", id="pg"></span>
86          <span class="progress-active", id="pg"></span>
87          <span class="progress-active" id="pg"></span>
88          <span class="progress-active" id="pg"></span>
89          <span class="progress-active" id="pg"></span>
90          <span class="progress-active" id="pg"></span>
91        </div> 
92      </div>

css

CSS
1/* ----------- pick-contentsの始まり----------------------*/
2
3main
4{ 
5  padding:0 50px;
6  display: flex;
7  justify-content: space-between;
8}
9.main-container
10{
11  width:100%;
12  max-width:850px;
13}
14.pick-contents
15{
16  display: flex;
17  position: relative;
18  padding-bottom: 60px;
19  overflow: hidden;
20  margin: 0 auto;
21}
22.fa-arrow-left
23{
24  position: absolute;
25  bottom:0;
26  left:30%;
27  padding-top: 3px;
28  transform: translate(-50%,-50%);
29  font-family: "Font Awesome 5 Free";
30  font-size: 26px;
31  background: rgb(223, 223, 223);
32  width:34px;
33  height:34px;
34  text-align: center;
35  border-radius: 50%;
36  color:rgba(0, 0, 139,0.6);
37}
38.fa-arrow-right
39{
40  position: absolute;
41  bottom:0;
42  right:30%;
43  padding-top: 3px;
44  transform: translate(0,-50%);
45  font-family: "Font Awesome 5 Free";
46  font-size: 26px;
47  background: rgb(223, 223, 223);
48  width:34px;
49  height:34px;
50  text-align: center;
51  border-radius: 50%;
52  color:rgba(0, 0, 139,0.6);
53}
54.pick-content
55{
56  display: none;
57  position: relative;
58  width:190px;
59  height:140px;
60  box-sizing: border-box;
61  margin: 0 25px;
62  box-shadow: 0 0 10px 5px rgba(210, 210, 210,0.5);
63}
64
65.pick-content img 
66{
67  background: #fff;
68  padding:5px;
69  margin: 0 auto;
70  min-width:160px;
71  height:140px;
72}
73.pick-content a
74{
75  width:150px;
76  height:130px;
77}
78.pick-content img:hover
79{
80  opacity: 0.8;
81}
82.pick-category
83{
84  position: absolute;
85  top:0px;
86  right:10px;
87  background: #000;
88  width:70px;
89  height:auto;
90  text-align: center;
91  z-index: 10;
92}
93.pick-category a
94{
95  font-size: 10px;
96  color:#fff;
97}
98.pick-category a:hover
99{
100  opacity: 0.6;
101}
102.pick-caption
103{
104  position: absolute;
105  top:50%;
106  left:10px;
107  width:140px;
108  height:62px;
109  font-size: 12px;
110  background-color: rgba(0,0,0,0.6);
111  overflow: hidden;
112  transition: 0.4s;
113}
114.pick-caption a
115{
116  color:rgba(225,225,225,0.9);
117}
118.pick-caption h3
119{
120  margin: 0 auto;
121  width:120px;
122  text-align: center;
123  border-bottom: 1px solid rgba(225,225,225,0.9);
124}
125.pick-caption p
126{
127  font-size: 10px;
128  letter-spacing: 1px;
129}
130.pick-caption:hover
131{
132  transform: translateY(-45px);
133  height:105px;
134}
135.progress-bar
136{
137  position: absolute;
138  bottom: 10px;
139  left: 50%;
140  transform: translateX(-50%);
141}
142.progress-bar span
143{
144  display: block;
145  width:10px;
146  height:10px;
147  border-radius: 10px;
148  background: rgba(241, 241, 241, 0.5);
149  border: 1px solid rgba(54, 54, 54, 0.2);
150  float: left;
151  margin-right: 10px;
152}
153
154/* ----------- pick-contentsの終わり----------------------*/