Автоматическая прокрутка слайдера не работает правильно

Question

Привет! Я пытаюсь создать слайдер с автоматической прокруткой.Так что это работает хорошо, но
, когда дело доходит до последнего слайда, он не переключается на первый, а останавливается.Посмотрите на мой HTML и код JavaScript, я думаю, что проблема в коде JS.Спасибо:

var inputs = $('input');
    setInterval(()=>{
        var next = inputs.filter(":checked").next('input');
        if (!next.length) next=inputs.first();
        next.prop('checked', true);
    }, 300);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <input type="radio" name="slides" id="slide1" checked>
  <input type="radio" name="slides" id="slide2" >
  <input type="radio" name="slides" id="slide3" >
  <input type="radio" name="slides" id="slide4" >
  <input type="radio" name="slides" id="slide5" >
  <input type="radio" name="slides" id="slide6" >

  <div class="slider_helper">

      <div class="captions">
        <div class="c2">Prediction 2</div>
        <div class="c3">Prediction 3</div>
        <div class="c4">Prediction 4</div>
        <div class="c5">Prediction 5</div>
        <div class="c6">Prediction 6</div>
      </div>

      <div class="img img1"></div>
      <div class="img img2"></div>
      <div class="img img3"></div>
      <div class="img img4"></div>
      <div class="img img5"></div>
      <div class="img img6"></div>
  </div>

  <div class="side-controls">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <label for="slide4"></label>
    <label for="slide5"></label>
    <label for="slide6"></label>
  </div>

  <div class="controls">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <label for="slide4"></label>
    <label for="slide5"></label>
    <label for="slide6"></label>
  </div>

 </div>

Answer 1

Изменить тип входа на радио input[type=radio]

var inputs = $('input[type=radio]');
    setInterval(()=>{
        var next = inputs.filter(":checked").next('input');
        if (!next.length) next=inputs.first();
        next.prop('checked', true);
    }, 500 );

Answer 2

Вы должны использовать что-то вроде этого:

<script type="text/javascript">
var inputs = $('input');
 var currentInput = inputs.first();
    setInterval(()=>{
        currentInput.prop('checked', true);
        if (currentInput.index()==inputs.last().index()) {
            currentInput = inputs.first();
        } else
            currentInput = inputs.filter(":checked").next('input');
    }, 300);
</script>