Act as a beginner webdeveloper not knowing much javascript, here is the HTML, CSS and Javascript Code for multi-item card slider, what i need is re-write javascript code such that the card keeps on sliding one at a time, doesn't stops at last, it should continue and then show card 1 on click next. Here are the codes : 
HTML : 
<div id="carouselExampleProjects" class="carousel" data-bs-ride="carousel">
                <div class="carousel-inner projects">
                    <div class="carousel-item active projects">
                        <div class="card">
                            <img src="..." class="d-block w-100" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">Card title 1</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the
                                    bulk of the
                                    card's content.</p>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item projects">
                        <div class="card">
                            <img src="..." class="d-block w-100" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">Card title 2</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the
                                    bulk of the
                                    card's content.</p>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item projects">
                        <div class="card">
                            <img src="..." class="d-block w-100" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">Card title 3</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the
                                    bulk of the
                                    card's content.</p>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item projects">
                        <div class="card">
                            <img src="..." class="d-block w-100" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">Card title 4</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the
                                    bulk of the
                                    card's content.</p>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item projects">
                        <div class="card">
                            <img src="..." class="d-block w-100" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">Card title 5</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the
                                    bulk of the
                                    card's content.</p>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item projects">
                        <div class="card">
                            <img src="..." class="d-block w-100" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">Card title 6</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the
                                    bulk of the
                                    card's content.</p>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>

                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleProjects"
                    data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleProjects"
                    data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>

CSS:
@media (min-width: 768px) {
  .carousel-inner.projects {
    display: flex;
  }
  .carousel-item.projects {
    margin-right: 0;
    flex: 0 0 33.333333%;
    display: block;
  }
}
.carousel-inner.projects{
  padding: 1em;
}
.card {
  margin: 0 .5em;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border: none;
}
.carousel-control-prev, .carousel-control-next{
  background-color: #e1e1e1;
  width: 6vh;
  height: 6vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

and Javascript : 
var carouselWidth = $(".carousel-inner.projects")[0].scrollWidth;
var cardWidth = $(".carousel-item.projects").width();
var scrollPosition = 0;

$(".carousel-control-next").on("click", function () {
    if (scrollPosition < (carouselWidth - cardWidth * 4)) { //check if you can go any further
      scrollPosition += cardWidth;  //update scroll position
      $(".carousel-inner.projects").animate({ scrollLeft: scrollPosition },600); //scroll left
    }
  });

$(".carousel-control-prev").on("click", function () {
    if (scrollPosition > 0) {
      scrollPosition -= cardWidth;
      $(".carousel-inner.projects").animate(
        { scrollLeft: scrollPosition },
        600
      );
    }
  });

var multipleCardCarousel = document.querySelector(
    "#carouselExampleProjects"
  );
  if (window.matchMedia("(min-width: 768px)").matches) {
    //rest of the code
    var carousel = new bootstrap.Carousel(multipleCardCarousel, {
      interval: false
    });
  } else {
    $(multipleCardCarousel).addClass("slide");
  }

Rewrite the code