Как сделать бесконечную карусель(слайдер)?

Question

Egorium @Egorium

Как сделать бесконечную карусель(слайдер)?

Хочу сделать бесконечную карусель, чтобы при прокрутке вправо/влево всегда были слайды
, то есть чтоб карусель всегда начиналась заново: либо с первого слайда (если скроллить при помощи нажатия правой кнопки),
либо же с конечного (если, наоборот, при помощи левой кнопки скроллить).
Саму прокрутку для карусели придумал, а вот сделать так, чтобы карусель стала бесконечной,
никак не могу!
Подскажите, пожалуйста!

<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; }