How to make loop jQuery slider - html

Question

I have the following code for a slider and it works perfect but the slider stops after going throught the images to the last one. I want to make this slider loop infinitely.
I have the following code for a slider and it works perfect but the slider stops after going throught the images to the last one. I want to make this slider loop infinitely.
Here's my attempt so far:
$(document).ready(function() {
$(".c-3d-carousel__item").on("click", function() {
$(this).prop("class", "c-3d-carousel__item c-3d-carousel__item-active");
let activeSlide = $(this).data("slide");
$(this)
.siblings()
.each(function() {
let slideNumber = $(this).data("slide");
if (slideNumber <= activeSlide) {
$(this).attr(
"class",
"c-3d-carousel__item c-3d-carousel__item-before c-3d-carousel__item-before--" +
(activeSlide - slideNumber)
);
} else {
$(this).prop(
"class",
"c-3d-carousel__item c-3d-carousel__item-after c-3d-carousel__item-after--" +
(slideNumber - activeSlide)
);
}
});
});
$(".next").on("click", function(i) {
$(".c-3d-carousel__item-active").next().click();
});
$(".prev").on("click", function(i) {
$(".c-3d-carousel__item-active").prev().click();
});
});
.c-carousel-showcase__carousel {
margin: 0 auto 30px;
min-height: 500px;
position: relative;
z-index: 1;
}
.c-3d-carousel {
position: relative;
}
.c-3d-carousel .c-3d-carousel__inner {
margin: 0 auto;
position: relative;
z-index: 1;
min-height: 450px;
width: 300px;
}
.c-3d-carousel .c-3d-carousel__inner .c-3d-carousel__item img {
width: 300px;
}
.c-3d-carousel__item {
top: 0;
left: 0;
position: absolute;
backface-visibility: hidden;
/* box-shadow: 0 20px 100px -18px rgba(0, 0, 0, 0.5); */
transition: all 600ms ease;
bottom: 0;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
display: flex;
align-items: center;
gap: 50px;
}
.c-3d-carousel__item .gatsby-image-wrapper {
pointer-events: none;
margin-bottom: -10px;
}
.c-3d-carousel__item.c-3d-carousel__item .content {
display: none;
background: #019047;
width: 150%;
height: calc(100% - 20%);
flex-direction: column;
justify-content: center;
padding-inline: 50px;
gap: 30px;
color: white;
position: absolute;
left: 100%;
text-align: center;
}
.c-3d-carousel__item.c-3d-carousel__item .content .title {
font-size: 20px;
font-weight: 500;
text-transform: uppercase;
}
.c-3d-carousel__item.c-3d-carousel__item .content p {
font-size: 16px;
font-weight: 300;
line-height: 150%;
}
.c-3d-carousel__item.c-3d-carousel__item-active .content {
display: flex;
}
.c-3d-carousel__item.c-3d-carousel__item-active {
z-index: 6;
opacity: 1;
}
.c-3d-carousel__item.c-3d-carousel__item-after--1 {
transform: translate3d(150px, 0, 0) scale(0.8);
opacity: 1;
z-index: 4;
}
.c-3d-carousel__item.c-3d-carousel__item-after--2 {
transform: translate3d(300px, 0, 0) scale(0.6);
opacity: 1;
z-index: 3;
}
.c-3d-carousel__item.c-3d-carousel__item-after--3 {
transform: translate3d(380px, 0, 0) scale(0.4);
opacity: 1;
z-index: 2;
}
.c-3d-carousel__item.c-3d-carousel__item-after--4 {
transform: translate3d(420px, 0, 0) scale(0.2);
opacity: 1;
z-index: 1;
}
.c-3d-carousel__item.c-3d-carousel__item-before--1 {
transform: translate3d(-150px, 0, 0) scale(0.8);
opacity: 1;
}
.c-3d-carousel__item.c-3d-carousel__item-before--2 {
transform: translate3d(-300px, 0, 0) scale(0.6);
opacity: 1;
}
.c-3d-carousel__item.c-3d-carousel__item-before--3 {
transform: translate3d(-380px, 0, 0) scale(0.4);
opacity: 1;
}
.c-3d-carousel__item.c-3d-carousel__item-before--4 {
transform: translate3d(-420px, 0, 0) scale(0.2);
opacity: 1;
}
.c-3d-carousel__item-after {
transform-origin: right center;
}
.c-3d-carousel__item-before {
transform-origin: left center;
}
.slider-control .c-btn {
margin: 0;
border: none;
background: none;
position: absolute;
top: 40%;
}
.slider-control .c-btn:hover svg path {
stroke: #019047;
stroke-opacity: 1;
}
.slider-control .c-btn.prev {
left: -5%;
}
.slider-control .c-btn.next {
right: -10%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-carousel-showcase__carousel">
<div class="c-3d-carousel">
<div class="c-3d-carousel__inner">
<figure class="c-3d-carousel__item c-3d-carousel__item-before c-3d-carousel__item-before--2" data-slide="1">
<img src="./images/about/slide1.png" alt="slide1">
<div class="content">
<div class="title">Results through teamwork</div>
<p>We collaborate effectively, always looking for more efficient ways to serve our employees and customers.</p>
</div>
</figure>
<figure class="c-3d-carousel__item c-3d-carousel__item-before c-3d-carousel__item-before--1" data-slide="2">
<img src="./images/about/slide1.png" alt="slide1">
<div class="content">
<div class="title">Results through teamwork</div>
<p>We collaborate effectively, always looking for more efficient ways to serve our employees and customers.</p>
</div>
</figure>
<figure class="c-3d-carousel__item c-3d-carousel__item-active" data-slide="3">
<img src="./images/about/slide1.png" alt="slide1">
<div class="content">
<div class="title">Results through teamwork</div>
<p>We collaborate effectively, always looking for more efficient ways to serve our employees and customers.</p>
</div>
</figure>
<figure class="c-3d-carousel__item c-3d-carousel__item-after c-3d-carousel__item-after--1" data-slide="4">
<img src="./images/about/slide1.png" alt="slide1">
<div class="content">
<div class="title">Results through teamwork</div>
<p>We collaborate effectively, always looking for more efficient ways to serve our employees and customers.</p>
</div>
</figure>
<figure class="c-3d-carousel__item c-3d-carousel__item-after c-3d-carousel__item-after--2" data-slide="5">
<img src="./images/about/slide1.png" alt="slide1">
<div class="content">
<div class="title">Results through teamwork</div>
<p>We collaborate effectively, always looking for more efficient ways to serve our employees and customers.</p>
</div>
</figure>
</div>
</div>
</div>
<!-- ./c-carousel-showcase__carousel -->
<div class="slider-control">
<button class="c-btn c-btn--dark prev">
<svg width="60" height="60" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.4 21.2002L35.6 50.0002L64.4 78.8002" stroke="black" stroke-opacity="0.4" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button class="c-btn c-btn--dark next">
<svg width="60" height="60" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35.6 21.2002L64.4 50.0002L35.6 78.8002" stroke="black" stroke-opacity="0.4" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<!-- ./slider-control -->
What do I need to add to the jquery code to make it loop?