Неверно берется следующий id
 

При наведении на li с 3 внутри, показывается следующий id для img неверно. То есть при первом наведении мыши показывает номер id - 4, которого нет, а вот при следующем наведении номер id - 0, что правильно.
Как правильно сделать переменную со следующим id, как карусель?

<div id="slider">
    <img id="img_0" src="1.jpg" style="margin-left:10px">
    <img id="img_1" src="2.jpg" style="margin-left:20px">
    <img id="img_2" src="3.jpg" style="margin-left:30px">
    <img id="img_3" src="4.jpg" style="margin-left:40px">
</div>

<ul class="navigate">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

let chosen_li = [];
let next_id;

$(".navigate li").on("mouseover", function () {
  let li = $(this);

  let index_li = li.index();

  chosen_li.unshift(index_li);
  if (chosen_li.length > 2) {
    chosen_li.pop();
  }
  if (chosen_li[0] !== chosen_li[1]) {
    $("#slider #img_" + chosen_li[0])
      .prependTo("#slider")
  }
//как правильно задать следующий id?
  next_id =
    next_id > $(".navigate li").length - 1
      ? 0
      : parseInt($("#slider").children().attr("id").split("_")[1], 10) + 1;

  console.log(next_id);
  $("#slider #img_" + next_id).insertAfter($("#slider img:first"));
});

Просто надо было вместо

next_id =
    next_id > $(".navigate li").length - 1
      ? 0
      : parseInt($("#slider").children().attr("id").split("_")[1], 10) + 1;

написать вот это

next_id =
     parseInt($("#slider").children().attr("id").split("_")[1], 10) + 1;
if (next_id > $(".navigate li").length - 1) next_id = 0;