自动滑块滚动无法正常工作

Question

Hi!I try to create a automatic scrolling slider. So it works good, but
when it comes to the last slide it does not switch to the first but stops. Look at my html and JavaScript code, i think that the problem is in JS code. Thanks:

 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

You should use something like this:

<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>

Answer 2

Change Input Type in to radio 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 );