JSでnext, prevボタンをクリックして写真をスライドさせる機能を実装したい。

ボタンを押して右、左に一つずつスライドを行いたい。

右のボタンを押すと右に一つスライドさせる。
左のボタンを押すと左に一つスライドさせる。

二回目以降にクリックするとスライドが写真を大きくスキップするようになり、収拾がつかない。

スライドの動きに納得していない。

HTML CSS JS

HTML
1　　　　　　　　　<div class="picture-wrap">
2					<div id="prev" class="btn"></div>
3					<div id="next" class="btn"></div>
4
5					<ul id="carousel" class="picture-wrap__items">
6						<li>
7							<article class="picture-wrap__box">
8								<img src="images/pollination-5544161_640.jpg" alt="carousel">
9								<div class="picture-wrap__content">
10									<h3>タイトル</h3>
11									<p>test testtesttesttesttesttesttesttesttest</p>
12								</div>
13							</article>
14						</li>
15						<li>
16							<article class="picture-wrap__box">
17								<img src="images/pollination-5544161_640.jpg" alt="carousel">
18								<div class="picture-wrap__content">
19									<h3>タイトル</h3>
20									<p>test testtesttesttesttesttesttesttesttest</p>
21								</div>
22							</article>
23						</li>
24						<li>
25							<article class="picture-wrap__box">
26								<img src="images/pollination-5544161_640.jpg" alt="carousel">
27								<div class="picture-wrap__content">
28									<h3>タイトル</h3>
29									<p>test testtesttesttesttesttesttesttesttest</p>
30								</div>
31							</article>
32						</li>
33						<li>
34							<article class="picture-wrap__box">
35								<img src="images/pollination-5544161_640.jpg" alt="carousel">
36								<div class="picture-wrap__content">
37									<h3>タイトル</h3>
38									<p>test testtesttesttesttesttesttesttesttest</p>
39								</div>
40							</article>
41						</li>
42					</ul>
43				</div>

CSS
1.picture-wrap {
2  position: relative;
3  overflow-x: hidden;
4  padding: 70px 0 40px;
5  top: -50px;
6  height: 70vh;
7}
8
9.picture-wrap__box {
10  width: 330px;
11  margin-right: 40px;
12  box-shadow: 0 0 10px #ddd;
13}
14
15.picture-wrap__content {
16  padding: 15px 10px 20px;
17  h3 {
18    margin-bottom: 10px;
19    letter-spacing: 0.1em;
20  } p {
21    font-size: 13px;
22  }
23}
24
25.btn {
26  border: 1px solid #555;
27  width: 40px;
28  height: 40px;
29  border-radius: 50%;
30  position: absolute;
31  top: 0;
32  transition: 0.3s;
33  cursor: pointer;
34  &::before {
35    content: "";
36    width: 13px;
37    height: 13px;
38    border-top: 5px solid #ddd;
39    border-right: 5px solid #ddd;
40    position: absolute;
41    top: 13px;
42    left: 13px;
43    transition: 0.3s;
44  } &:hover {
45    background: #35ffff;
46  } &:active {
47    top: 1px;
48  } &:hover::before {
49    border-color: #000;
50  }
51}
52
53#prev.btn {
54  right: calc(5%);
55  &::before {
56    transform: rotate(45deg);
57  }
58}
59
60#next.btn {
61  left: calc(85%);
62  &::before {
63    transform: rotate(-135deg);
64  }
65}
66
67#carousel {
68  position: absolute;
69  top: 60px;
70  left: 0;
71  list-style: none;
72}
73
74.picture-wrap__items {
75  display: flex;
76}
77
78.picture-wrap__box img {
79  display: block;
80  width: 100%;
81  height: 200px;
82  object-fit: cover;
83}

JS
1const carouselWidth = $("#carousel li").width();
2const length = $(".picture-wrap__box").length;
3const innerWidth = carouselWidth * length;
4const time = 400;
5
6const carouselinner = $("#carousel");
7const prev = $("#prev");
8const next = $("#next");
9
10let c = 1;
11
12prev.click(function(){
13
14  if(c == length){
15
16  } else {
17    carouselinner.stop().animate({
18      left: -c * carouselWidth
19    },time);
20    c--;
21  }
22
23});
24
25next.click(function(){
26
27  if(c == length){
28
29  } else {
30    carouselinner.stop().animate({
31      left: c * carouselWidth
32    },time);
33    c++;
34  }
35
36});