How to reset the querySelectorAll number?

Question

I have 5 li and the function stops repeating when it reaches the same number of times. I need another function to reset or cancel this number.

This is the code that I have:

let currentIndex = 0;

function toMove() {
  const slider  = document.querySelector('#thumbelina0');
  const element = document.querySelectorAll('li')[currentIndex];
  slider.style.marginLeft = parseInt(slider.style.marginLeft) 
                          - element.offsetWidth - 10 + 'px';
  currentIndex += 1;
}

<div id="thumbelina" style="padding:5px;overflow: hidden;">
  <button class="btnToLeft" onclick="toMovel()">
    <
  </button>
  <ul id="thumbelina0" style="padding:0px; width:max-content; text-align:center;display: flex;margin-bottom: 0px;margin-left: 0px;">
    <li style="padding:5px;width: auto;height: 100px;display: block;">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images)"
        style="margin-top: -5px;margin-left: -5px;" />
    </li>
    <li style="padding:5px;width: auto;height: 100px;display: block;">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP._IgGc9h6kbuSmYLsRhBNvwHaEo%26pid%3DApi&f=1&ipt=10afdedcaa07209003fc91888b567582128374e6578bce7d2448311d0c0893f9&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP._IgGc9h6kbuSmYLsRhBNvwHaEo%26pid%3DApi&f=1&ipt=10afdedcaa07209003fc91888b567582128374e6578bce7d2448311d0c0893f9&ipo=images)"
        style="margin-top: -5px;margin-left: -5px;" />
    </li>
    <li style="padding:5px;width: auto;height: 100px;display: block;">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images)"
        style="margin-top: -5px;margin-left: -5px;" />
    </li>
    <li style="padding:5px;width: auto;height: 100px;display: block;">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP._IgGc9h6kbuSmYLsRhBNvwHaEo%26pid%3DApi&f=1&ipt=10afdedcaa07209003fc91888b567582128374e6578bce7d2448311d0c0893f9&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP._IgGc9h6kbuSmYLsRhBNvwHaEo%26pid%3DApi&f=1&ipt=10afdedcaa07209003fc91888b567582128374e6578bce7d2448311d0c0893f9&ipo=images)"
        style="margin-top: -5px;margin-left: -5px;" />
    </li>
    <li style="padding:5px;width: auto;height: 100px;display: block;">
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images" style="background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.eKE8nrMRCK3bdvd62kWJ_wHaEK%26pid%3DApi&f=1&ipt=5827498e8cb6aac88f508eaf79bab099000b1748a4b93fd8b994b0b3c56c5fe5&ipo=images)"
        style="margin-top: -5px;margin-left: -5px;" />
    </li>
  </ul>
  <button class="btnToRight" onclick="toMove()">
    >
  </button>
</div>