Как сделать обнуление позиций слайдера?

Question

vlados_lavandos @vlados_lavandos

Как сделать обнуление позиций слайдера?

Я только начинаю учится, помогите пожалуйста. Нужно сделать чтобы слайдер при достижении последнего элемента, возвращался к первому элементу

<body>
    <section class="partners">
        <div class="partners-wrapper">        
            <h2>НАШИ ПАРТНЁРЫ</h2>
            <img src="img/lil-logo.svg" alt="#">
        </div>
        <button class="pre-btn"><img src="img/pre-btn.png" alt="#"></button>
        <button class="nxt-btn"><img src="img/next-btn.png" alt="#"></button>
        <div class="partner-slider">
            <div class="partner-logo"><img class="partner-thumb" src="img/5.png" alt=""></div>
            <div class="partner-logo"><img class="partner-thumb" src="img/5.png" alt=""></div>
            <div class="partner-logo"><img class="partner-thumb" src="img/5.png" alt=""></div>
            <div class="partner-logo"><img class="partner-thumb" src="img/5.png" alt=""></div>
            <div class="partner-logo"><img class="partner-thumb" src="img/5.png" alt=""></div>
            <div class="partner-logo"><img class="partner-thumb" src="img/5.png" alt=""></div>
            <div class="partner-logo"><img class="partner-thumb" src="img/5.png" alt=""></div>
            <div class="partner-logo"><img class="partner-thumb" src="img/5.png" alt=""></div>
            <div class="partner-logo"><img class="partner-thumb" src="img/5.png" alt=""></div>
            <div class="partner-logo"><img class="partner-thumb" src="img/5.png" alt=""></div>
            <div class="partner-logo"><img class="partner-thumb" src="img/5.png" alt=""></div>
            <div class="partner-logo"><img class="partner-thumb" src="img/5.png" alt=""></div>
        </div>
    </section>
    </div>
    <script src="script.js" defer></script>
</body>

.partner-slider{
  display: flex;
  scroll-behavior: smooth;
  overflow-x: auto;
  margin: 80px 160px 175px 160px;
  gap: 50px;
}

.partner-slider::-webkit-scrollbar {
  display: none;
}

.partner-logo{
  position: relative;
  overflow: hidden;
  min-height: 68px;
  min-width: 175px;
  opacity: 0.8;
}

.partner-logo:hover{
  opacity: 1;
}

.pre-btn,
.nxt-btn{
  border: none;
  position: absolute;
  top: 190px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: none;
  opacity: 0.8;
}

.pre-btn{
  left: 70px;
}

.nxt-btn{
  right: 70px;
}

.pre-btn:hover{
  opacity: 1;
  left: 70px;
}

.nxt-btn:hover{
  opacity: 1;
  right: 70px;
}

const productContainers = document.querySelectorAll('.partner-slider');
const nxtBtn = document.querySelectorAll('.nxt-btn');
const preBtn = document.querySelectorAll('.pre-btn');

productContainers.forEach((item, i) => {
    let containerDimensions = item.getBoundingClientRect();
    let containerWidth = containerDimensions.width;
    let offset = 0;


    nxtBtn[i].addEventListener('click', function() {
        offset += 875;
        if(offset > 10500){
            offset = 0;
        }
        productContainers.style.left = -offset + "px"
        item.scrollLeft += containerWidth;
    })

    preBtn[i].addEventListener('click', function() {
        item.scrollLeft -= containerWidth;
    })
})