Проблема с бесконечной прокруткой на слайдере

Question

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

Может кто-нибудь сказать мне, где я совершил ошибку?

Спасибо

<div id="gallery">
    <div class="photos">
        <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
        <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
        <img src="https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg" alt="">
        <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
        <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
        <img src="https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg" alt="">
        <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
        <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
        <img src="https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg" alt="">



   </div>
    <div class="buttons">
        <input type="button" value="indietro" class="prev">
        <input type="button" value="avanti" class="next">
    </div>
</div>


let btn_prev = document.querySelector("#gallery .buttons .prev");
let btn_next = document.querySelector("#gallery .buttons .next");

let images = document.querySelectorAll("#gallery .photos img");
let i = 0;


btn_prev.onclick = function() {
  images[i].style.display = "none";
  i = i - 1;
  if (i < 0) {
    i = images.length - 1;
  }
  images[i].style.display = "block";
}

btn_next.onclick = function() {
  images[i].style.display = "none";
  i = i + 1;
  if (i >= images.length) {
    i = 0;
  }

  btn_next.style.backgroundImage = "url(" + images[i + 1].src + ")";

  images[i].style.display = "block";

}