How to make an infinite carousel (slider)?

Question

JavaScript

I want to make an endless carousel so that when scrolling to the right / left there are always slides
, that is, so that the carousel always starts again: either from the first slide (if you scroll by pressing the right button),
or from the last one (if, on the contrary, using the left button scroll).
I came up with the scrolling for the carousel, but I can’t make it so that the carousel becomes infinite
!
Tell me please!

<div class="wrapper">
    <div class="slider-container">
        <div class="slider-track">
          <div class="slider-item" id="first_example"></div>
          <div class="slider-item" id="second_example"></div>
          <div class="slider-item" id="third_example"></div>
          <div class="slider-item" id="fourth_example"></div>
          <div class="slider-item" id="fifth_example"></div>
          <div class="slider-item" id="sixth_example"></div>
        </div>
    </div>
    <div class="slider-buttons">
          <button class="btn_left">Left</button>
          <button class="btn_right">Right</button>
    </div>
</div>

document.querySelector('.btn_left').addEventListener('click', toSlideCarouselLeft);
document.querySelector('.btn_right').addEventListener('click', toSlideCarouselRight);

var sliderTrack = document.querySelector('.slider-track');
var sliderItem = document.querySelector('.slider-item');
var sliderItemWidth = window.getComputedStyle(sliderItem).getPropertyValue('width');
var scrollWidth = parseInt(sliderItemWidth, 10) + 30;
var i = 0;

function toSlideCarouselRight (){
    i -= scrollWidth;
    sliderTrack.style.transform = "translateX(" + i + "px)";
    sliderTrack.style.transition = "700ms"; 
 };

function toSlideCarouselLeft () {
   i += scrollWidth;
   sliderTrack.style.transform = "translateX(" + i + "px)";
   sliderTrack.style.transition = "700ms";
};

.wrapper {
    margin-bottom: 30px; }

.slider-container {
    overflow: hidden;
    margin-bottom: 30px; }

.slider-track {
    display: flex;
    justify-content: space-between; }

.slider-item {
    min-width: 370px;
    height: 290px;
    background-repeat: no-repeat;
    margin-right: 30px;
    background-color: firebrick; }

#first_example {
    background-image: url(fwork.png); }

#second_example {
    background-image: url(swork.png); }

#third_example {
    background-image: url(twork.png); }

#fourth_example {
    background: linear-gradient( -180deg, cyan, blueviolet); } 

#fifth_example {
    background: linear-gradient(60deg, darkslateblue, mediumslateblue); }

#sixth_example {
    background: linear-gradient(40deg, aquamarine, pink); }

.slider-buttons {
    text-align: center; }

Answer 1

When you need to scroll to the first slide, clone it, add it to the end. When the clone goes out of scope, we delete it.